Styling the nav bar help

Hi Brian,

Your post just reminded me of your email. I’m sorry I didn’t reply to that right away. Your request for a tutorial on styling WP menus was well received. I started working on a scaffold for WP menus to make this as easy as possible but then got distracted and forgot that I hadn’t replied to you.

Ablands advice for styling the dropdown menu is good. I see that the site you’re currently working on doesn’t have a dropdown bit in the main menu right now though. For giving the menu a full width black background and styling the font the same, try this:

1. Double-click the area just to the left of the menu links to target the wrapper element for the nav menu. See the red circle here: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7Sjlbk9yMENTOXhIV2s/edit?usp=drivesdk

2. Open the advanced options on the selector wizard (top right) and then drag the targeting slider down to the option that just says:

div.fl-page-nav-wrap

3. Name your selector (e.g. ‘Menu Wrapper’) and place it in the Main Menu folder.

4. Go to the gradient style group and set both gradient A and C to black. I can see why this may have puzzled you if you got this far yourself and tried to set a black background color. The gradient shows over the top of the background color setting making it essentially ineffective.

5. Now go to the Main Menu selector you created in the Main Menu folder. You should probably rename the selector to ‘Main Menu Links’ because the selector actually targets multiple links, not a sinlge main menu element – the highlighting can be deceptive sometimes if elements are stacked next to each other without margins separating them. You can rename the selector by clicking it’s name in the top toolbar and then updating the ‘Descriptive Name’ field.

6. You can set the font of the menu links to match your other site by increasing the font-size to 16px and then selecting ‘Google Font..’ from the font-family dropdown. Once Google fonts have loaded in the popup window, you will see that Roboto is the second font listed. Click the ‘Use this font’ link to insert it.

That should be everything. If anything else isn’t quite right please let me know.

Thanks,
Sebastian

Hi Brian,

So I see that you’ve successfully followed my suggestion on number 5 and renamed the selector (I now realise that I went off on a bit of a tangent with point 5 but I’m glad you managed it).

Regarding point 6, go back to your Main Menu Links selector (if you’re not on it already). On the Font style group there is an option for setting Google fonts. Please see this screenshot: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7SjlU3NGbEtWb3Y3ZHM/edit?usp=drivesdk. You can then insert the Roboto font once the Google fonts have loaded.

And then two options to the right you can set font-size (the field that says 39px in the screenshot). I was suggesting that you set this to 16px as that was the font-size used on the other site you mentioned.

The cursor is still a crosshair outside of Microthemer because this has been set to ‘crosshair’ on your ‘Main Menu Links’ selector (perhaps by accident). You can turn this off by going to the behaviour tab and deleting the value or setting it to pointer: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7SjlcExLS0dEYTU1dmM/edit?usp=drivesdk

I still need to do some research before releasing a scaffold for WP menus. I need to study what things all WP menus have in common vs theme-specific HTML markup.

I hope that helps!

Sebastian

Hi Brian,

Sorry I forgot about the hover states. Try the following:

Copy this code:

.fl-page .fl-page-nav-wrap .navbar-nav > li > a:hover,
.fl-page .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a

1. Then click the name of the Main Menu folder in the top toolbar to reveal the quick edit options for the folder.
2. Click the (+) icon to open the manual selector input fields
3. Paste the code above that you copied into the textarea.
4. Give the selector a name and then click the ‘ADD SELECTOR’ button
5. Go to the background options and set the yellow background color.
6. See this screenshot for help: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7Sjld2p2WVJuNFVVMU0/edit?usp=drivesdk

You may also want to do the following to match the other menu further:

1. Go to the other Main Menu Links selector you have already created.
2. On the padding and margin property group set the top and bottom margin to 0
3. Set the top and bottom padding to 15
4. Move to the Font group and set the color to white.

That should style the menu like the other site. I notice that you use a different shade of yellow on the other site. But the site you’re trying to style uses a different shade of yellow throughout so if you change this in the menu you should probably change it throughout your site.

Cheers,
Sebastian

So if you create a new selector for the current menu item using this code it should work:

ul#menu-main-menu-1 li.current-menu-item > a

The code we previously gave you for styling the active page wasn’t working because your general link styling selector had higher ‘specificity’ (because it has an id in it). By using an id (#menu-main-menu-1) in the selector above it will be specific enough to override the general link styling selector.

Cheers,
Sebastian