Created tabbed top navigation in Lifestyle Pro

[4Bservices]

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

[Lauren @ OnceCoupled]

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

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

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!!

[Lauren @ OnceCoupled]

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! 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

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.

[Lauren @ OnceCoupled]

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!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

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!

[4Bservices]

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!

[4Bservices]

https://drive.google.com/file/d/0Bx52k4FYPRMJdHFyVGstYS1Rb2s/edit?usp=sharing

Screen shot of where the hooks are.

[Lauren @ OnceCoupled]

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.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

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.

[Lauren @ OnceCoupled]

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.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

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

[4Bservices]

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.

[Lauren @ OnceCoupled]

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.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[4Bservices]

I DID IT!!! Whoohooooo! thank you for your help!

For others that come across this post I had to change the call of the navigation from the functions.php as well as editing the wrap in the stylesheet.

[Author]

Posts