Edit color/style of main nav menu on blogs-mu theme?

Hi all!

So this is my first post, but won't be my last...

The Blogs-Mu theme rocks!

Currently, I am trying to locate (and edit color) for the hover/active
links in the main navigation bar. Although I thought I had seen the info,
I have searched, and searched....to no avail this time 'round

Live demo of issue:
http://smallbizsurfer.com/

WP 3.0.4

I have already made a couple of successful edits by adding
them into child-style.css, and suspect that the "place to add"
would be the same in this scenario?

I am not a coder - but comfortable making edits safely
with a bit of pointing in the right direction on this one...

Thanks!

  • James Farmer
    • CEO (of WPMU DEV, honest)

    Hi dormdough,

    Great to have you as a member, welcome aboard :slight_smile:

    Richard's (main guy for blogs.mu) out of touch at the moment (on holiday) but will be back in under a week, in the meantime though hopefully Tammie or one of our support peeps can assist you.

    Cheers, James

  • Philip John
    • DEV MAN’s Apprentice

    Hey dormdough!

    Welcome to WPMU DEV! Good to see you :slight_smile:

    So I've had a gander at the Blogs MU theme and find the specific CSS styles that relate to the navbar! They are...

    /blogs-mu/_inc/css/base.css : line 676

    ul#nav li:hover a, ul#nav li#home a, ul#nav li.selected a, ul#nav li.current_page_item a {
    background: #1E2631;
    color: white;
    }

    /blogs-mu/_inc/css/base.css : line 672

    ul#nav li a {
    color: #505C63;
    display: inline-block;
    float: left;
    margin: 0px;
    padding: 8px 15px;
    text-decoration: none;
    }

    /blogs-mu/_inc/css/base.css : line 674

    ul#nav li a:hover {
    background: #1E2631;
    border-bottom-left-radius: 6px 6px;
    border-bottom-right-radius: 6px 6px;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    color: white;
    display: inline-block;
    float: left;
    margin: 0px;
    padding: 8px 15px;
    text-decoration: none;
    }

    I'm pretty sure that's all of them...

    I recommend you overwrite these CSS rules within a child theme rather than editing the main theme as those changes will get overwritten when you upgrade to a newer version - and that can get really confusing ;D

    Hope that helps!

    Phil

  • Tammie
    • WordPress Wizard

    As Phil said those are the navigation styles you only need to have the following in your child theme though if for hover / current:

    ul#nav li:hover a, ul#nav li#home a, ul#nav li.selected a, ul#nav li.current_page_item a {
    background: #1E2631;
    color: white;
    }
  • dormdough
    • New Recruit

    Thanks!

    First - I realized I haven't a real name up there.

    I'm Kurt : - hello again to all :slight_smile:

    I have added the code provided by Tammie to child-style.css, successfully altering the color of hover, current, and selected. However, I did not gain control of the drop-down item styling (EDIT: as I failed to ask for it lol). Perhaps additional lines for the child-style.css?

    Updated per Code above:
    http://smallbizsurfer.com

    Cheers
    Kurt

  • Philip John
    • DEV MAN’s Apprentice

    Hey Kurt :slight_smile: Nice to have names and faces!

    It'd be worth you having some tools to help you edit the CSS... If you're using Firefox as your web browser, download the Web Developer inspection and use the "View Style Information" tool to click on the elements (i.e. the menu) you want to get the CSS styles for.

    Alternatively, if you're using Chrome, just right click on the elements and choose "Inspect element".

    That's how I found out that the sub-menus are styled by this selector on line 678 in base.css: ul#nav ul li a

    Adding that to your child theme should allow you to start styling your sub-menus! :slight_smile:

    Phil

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.