• I would like to change the color and style of just one top nav menu item (Shop the Store!) on my site blog.bluezelia.com.

    I understand that I need to add code to the CSS file. Something like this example from another support thread:

    #access li.page-item-37 a {
    font-family: curlz mt; font-size: 23px; color: #aabadd;
    }

    However, I am not sure how to identify the item number associated with ‘Shop the Store’. I am also not positive about where to add the code. I am guessing in this block:

    #branding ul.menu,
    #colophon #access-footer ul.menu {
    font-size: 14px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;

    Any ideas?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have a Custom CSS plugin, or does your theme come with a Custom CSS part of the dashboard?

    Thread Starter driggers01

    (@driggers01)

    I don’t use a plugin but I can access the CSS file.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What does that mean, are you editing the style.css file of the theme?

    Thread Starter driggers01

    (@driggers01)

    Yes

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you instead use a Custom CSS plugin? Like this http://wordpress.org/plugins/custom-css-manager-plugin

    Thread Starter driggers01

    (@driggers01)

    I would prefer not to. I can play with the code myself. Only have one question really…how to identity item number associated with ‘Shop the Store’?

    #access li.page-item-?? a {
    font-family: curlz mt; font-size: 23px; color: #aabadd;
    }

    Where ‘??’ equals number associated with ‘Shop the Store’

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using a browser tool like Firebug: http://getfirebug.com – Right click on your menu item and select “Inspect element” to expose its associated HTML.

    Thread Starter driggers01

    (@driggers01)

    Thanks. I’ll give that a try.

    Thread Starter driggers01

    (@driggers01)

    I did identify the element and added the ‘#access…color: #5CACEE’ to the CSS file (see below):

    }
    #branding ul.menu,
    #colophon #access-footer ul.menu {
    font-size: 14px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    #access li id=”menu-item-364″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-364″ a {
    color: #5CACEE;
    }
    }

    I didn’t see a change to the page (reloaded, cleared cache…). Did I make a mistake with the line syntax?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry I’m not comfortable giving advice to change the theme’s files, as other people will be reading this thread and may think it’s okay to do so.

    Thread Starter driggers01

    (@driggers01)

    I’ll keep researching.

    This theme has custom CSS – so why are not not using that?

    Thread Starter driggers01

    (@driggers01)

    I’m not sure what you mean. The catch box theme allows me to access the style.css file. It is in this file that I have made many customization.

    allows me to access the style.css file. It is in this file that I have made many customization.

    When you update the theme, all of those changes will be lost. The purpose of having custom CSS is to avoid that. You should be ADDING your CSS changes to the custom CSS – which will override existing CSS and not be lost upon update.

    Thread Starter driggers01

    (@driggers01)

    Can you tell me how to access the custom CSS?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Change one menu item's font and style’ is closed to new replies.