Styling the nav bar help

This topic contains 10 replies, has 3 voices, and was last updated by  Sebastian 7 years, 5 months ago.

Author Posts

Brian67_

Hi

I have just signed up and have been using CSSHero.

I only really use CSSHero for styling the nav bars of my sites.

Im still a novice and need help to style this nav bar http://www.bailiffresponseteam.info/impoundedcars/

So far i have managed to change the background to black but i will need to style it like i have here on another of my sites http://www.focusma.co.uk

Is there a video or can someone take me through the process please

Regards
Brian


Abland

Hi, Brian,

This starter video is really good for all levels of designers:
https://themeover.com/quick-start-microthemer-video-tutorial/

In looking at your themes the hover and active values you want to get to are:

.fl-page .fl-page-nav-wrap .navbar-nav > li > a:hover,
.fl-page .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
    background-color: rgba(255,216,6,1) !important;
}

On a side note, I got the page builder but was curious how you liked the bb theme?


Sebastian

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


Brian67_

Hi Abland

Thanks for your help.

I dont really understand what you mean!

I am loving the WPBeaver Page Builder, its quick and very easy to use!


Brian67_

Hi Sabastian

Thanks for your help.

Im ok until number 5, got a little lost here.

I need to be able to style the hover and highlight the current page.

Im interested in this “Scaffold” facility sounds very quick, do you have something i could use?

Regards
Brian


Brian67_

Sorry… also when i exit the Macrothemer and go back into wordpress i still get the cursor as a cross when i hover over the navbar?


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


Brian67_

Thanks Sabastian.

I still need some help though, I need to be able to style the hover and highlight the current page.


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


Brian67_

Hi Sebastian

I have just got around to following these lastset of instructions thank you.

I think im all there now.

Just one more thing and thats the ACTIVE state when the menu button highlights on the page you are on!

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

You must login or register to reply to this topic.