Created tabbed top navigation in Lifestyle Pro

Community Forums Forums Design Tips and Tricks Created tabbed top navigation in Lifestyle Pro

This topic is: resolved

This topic contains 15 replies, has 2 voices, and was last updated by  4Bservices 3 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #102901

    4Bservices
    Member
    Post count: 12

    A client wants her top navigation to be a tabbed navigation similar to the Innovative Theme. She is using Lifestyle Pro and the only thing that really needs to happen is the white wrap background needs to be moved down so that the tabs stand out.

    This is the custom css I have added:

    .menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .site-header .menu li a:active, .site-header .menu li a:hover, .site-header .menu .current_page_item a, .site-header .menu .current-cat a, .site-header .menu .current-menu-item a {
    	background: none repeat scroll 0 0 #FFFFFF;
    	border-radius: 3px 3px 0 0;
    	box-shadow: 0 1px 5px #999999;
    	color: #30162B;
    	display: normal;
    	font-size: 13px;
    	margin: 10px 15px 0 0;
    	padding: 7px 15px 6px;
    	position: relative;
    	text-decoration: none;
    }
    
    .menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .site-header .menu li a:active, .site-header .menu li a:hover, .site-header .menu .current_page_item a, .site-header .menu .current-cat a, .site-header .menu .current-menu-item a {
    	background: none repeat scroll 0 0 #FFFFFF;
    	border-radius: 3px 3px 0 0;
    	box-shadow: 0 1px 5px #999999;
    	color: #30162B;
    	display: normal;
    	font-size: 13px;
    	margin: 10px 15px 0 0;
    	padding: 7px 15px 6px;
    	position: relative;
    	text-decoration: none;
    }
    
    .menu-primary a, .site-header .menu a {
    	background: none repeat scroll 0 0 #FFFFFF;
    	border-radius: 3px 3px 0 0;
    	box-shadow: 0 1px 5px #999999;
    	color: #30162B;
    	display: normal;
    	font-size: 13px;
    	font-weight: bold;
    	margin: 10px 15px 0 0;
    	padding: 7px 15px 6px;
    	position: relative;
    	text-decoration: none;
    }

    Another thing is the text in the tabs is squished together and not nice like before the css was added. How can I unsquish the font as well as move the wrap down so the tabs stand out.

    http://virtuallynsync.net
    #102903

    Lauren @ OnceCoupled
    Member
    Post count: 512

    The font is so thick because you have font-weight: 700 in .menu-primary a. Decrease that to 500 and you’ll be good to go. To move the tabs down some, you can add padding-top to the #nav. Your first tab is getting cut off on the left, so I’d some padding over there, too, maybe in the form of margin-left directly to the first li.

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102905

    4Bservices
    Member
    Post count: 12

    Shouldn’t the tabs be moved up so they are out of the white wrap?

    How would I add padding to just the first li? And I don’t want the secondary navigation to move just the top/primary. I’m not 100% on how to write the .top-nav (or whatever it is) padding code to not break the site :)

    I’ve been starring at CSS so long everything is looking wrong and jumbled. Any help is VERY appreciated!!

    • This reply was modified 3 months ago by  4Bservices.
    • This reply was modified 3 months ago by  4Bservices.
    #102910

    Lauren @ OnceCoupled
    Member
    Post count: 512

    Apologies, I was also confused on why you would want the tabs to be moved down. In that case, I would look up what hook you need to move the navigation outside of the wrap, done using your functions file. This page may be of help: http://gregrickaby.com/genesis-code-snippets/#header, along with the plugin ‘Genesis Simple Hooks’.

    To target the first li element, look up the “:first-child” pseudo element. Good luck! :)


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102913

    4Bservices
    Member
    Post count: 12

    So I added this:

    /** Move primary nav menu */
    remove_action( 'genesis_after_header', 'genesis_do_nav' );
    add_action( 'genesis_before_header', 'genesis_do_nav' );

    into the simple hook for wp_head hook as well as genesis_before_header and genesis_header but nothing changes.

    #102915

    Lauren @ OnceCoupled
    Member
    Post count: 512

    Oops, I mentioned the wrong plugin in my last message! Use this: https://wordpress.org/plugins/genesis-visual-hook-guide/ to learn about the hooks on your site and where they are located. Choose the hook outside of your wrap to get the tabs above the white area. :) Let me know if there’s anything else – I’m just riddled with mistakes today!


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102917

    4Bservices
    Member
    Post count: 12

    It’s no problem!!! Let me know your website I’d like to thank you via some social sharing of recent posts :)

    Off to try this other plugin. Was thinking if I just moved the “wrap” down that would solve it but moving the navigation up works too — now to just figure out the code!

    #102920

    4Bservices
    Member
    Post count: 12

    Ugh still nothing :(

    I see that I need the navigation to appear in genesis_before. I’m trying that code

    /** Move primary nav menu */
    remove_action( 'genesis_after_header', 'genesis_do_nav' );
    add_action( 'genesis_before', 'genesis_do_nav' );

    but nothing changes. So frustrating!

    #102924

    4Bservices
    Member
    Post count: 12
    #102925

    Lauren @ OnceCoupled
    Member
    Post count: 512

    Oh my site has been down for about a month now. I resolved to work on it today, but it’s so much easier to get distracted by these forums! Hopefully it’ll be up soon; it’s at: http://oncecoupled.com

    Moving the wrap “down” would require a lot more work than moving the navigation outside of the wrap, which will be a lot cleaner too. It looks like your navigation is pretty much styled appropriately to fit right into the new area, as well.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102928

    4Bservices
    Member
    Post count: 12

    If only I could get it there. For now it refuses to move. I’m not sure if I’m using the wrong code in the wrong hook area but it just refuses to go anywhere.

    #102931

    Lauren @ OnceCoupled
    Member
    Post count: 512

    Small chance it’s a caching issue, so if you have any plugins installed make sure you clear everything out.

    More than likely there’s another line in your file doing the same thing, over-writing your code. Since this theme already has a re-positioned navigation, you can delete the lines you added, find the lines that are already in the code, and just edit the hook to the one you know you need.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102940

    4Bservices
    Member
    Post count: 12

    Tried and nothing. Actually all of that code I added into the simple hooks was showing on the website with no change.

    #102944

    4Bservices
    Member
    Post count: 12

    Okay so I added the code to the functions.php file and it moved but now there are two and it’s a little above the wrap.

    #102946

    Lauren @ OnceCoupled
    Member
    Post count: 512

    The nav has been hooked in twice, you need to remove the one you don’t want. You’ll want to remove the margin-top from your wrap, as well.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.