Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • May 14, 2013 at 8:33 pm #23276
    jwferne

    Hi Guys,

    Have a simple question for you all. I was wondering if you can tell me how to properly find and define the font characteristics for the the:

    – Top Menu – and also with selected and hover

    – Sub Menu – and also with selected and hover

    I’m getting really confused on what to grab with firebug.

    Sorry for the noob question, but thank you very much for your help!!!

    – John

    May 15, 2013 at 1:42 am #119177
    Ismael

    Hi,

    For the menu you can use this

    #top .main_menu .menu li > a {
    
display: block;
    
text-decoration: none;
    
padding: 0 13px;
    
font-weight: normal;
    
font-size: 12px;
    
font-weight: 600;
    
font-size: 13px;
    
font-family: Helvetica;
    
}

    For the submenu, try this.

    #menu-sub-menu a {
    
font-size: 15px;
    
color: red;
    
}

    Regards,

    Ismael

    May 15, 2013 at 3:03 am #119178
    jwferne

    Ismael,

    the sub menu doesn’t seem to do anything.

    – John

    May 15, 2013 at 3:08 am #119179
    Ismael

    Hi,

    What type of header are you using? Can you give me a screenshot of the submenu?

    Regards,

    Ismael

    May 15, 2013 at 3:48 am #119180
    jwferne

    Not using the mega-menu… the header i’m using is the one with the navigation on the bottom logo

    May 15, 2013 at 10:50 pm #119181
    Ismael

    Hi,

    You should use this

    #top .main_menu .menu li ul a {
    
width: 100%;
    
height: auto;
    
float: left;
    
text-align: left;
    
line-height: 23px;
    
padding: 8px 15px;
    
font-size: 12px;
    
min-height: 23px;
    
max-width: none;
    
text-decoration: none;
    
}

    Regards,

    Ismael

    May 15, 2013 at 11:59 pm #119182
    jwferne

    Oh that’s perfect, thank you!

    separate note —

    I can’t get the hover state to work properly. I tried the following cods and it didn’t do anything:

    hover state:

    #top .main_menu .menu li ul a:hover {

    active state:

    #top .main_menu .menu li ul a:active {

    Thanks bud

    May 16, 2013 at 6:48 am #119183
    Dude

    Hey!

    Did you try to add !important to your code like:

    #top .main_menu .menu li ul a:hover {
    
color. #000 !important;
    
}

    Best regards,

    Peter

    May 16, 2013 at 8:03 am #119184
    jwferne

    Thanks Peter… I’ve got everything working great but the active states. IF thats what it’s called. When your on the page, I want that menu item only to be bold.

    – John

    May 17, 2013 at 12:59 am #119185
    Ismael

    Hi,

    I think this is what you want.

    .active-parent-item a {
    
color: red !important;
    
font-weight: bold !important;
    
}

    Regards,

    Ismael

    May 17, 2013 at 3:54 am #119186
    jwferne

    Hi Ismael… unfortunately that code is working. I’ve got my site up and running so you can view it directly:

    http://www.tfgsearch.com

    For example when you come to the site, I’d like the first menu option “welcome” to be bold / black. Then congruently for each page that’s active that page would be bold / black.

    Hope that makes sense for what I’m trying to do.

    – John

    May 17, 2013 at 5:28 am #119187
    Ismael

    Hi,

    Use this.

    .current-menu-item a {
    
color: blue !important;
    
font-weight: bold !important;
    
}

    Regards,

    Ismael

    May 18, 2013 at 4:00 am #119188
    jwferne

    Ismael,

    Unfortunatley that didn’t work either. Any other thoughts?

    May 18, 2013 at 6:29 am #119189
    Dude

    Hey!

    Try following code:

    #top .main_menu .menu li.current-menu-item > a
    
font-weight: bold !important;
    
}

    Best regards,

    Peter

    May 18, 2013 at 8:16 am #119190
    jwferne

    :( didn’t work. I also added the beginning bracket after the A, so it’s not that either.

    May 18, 2013 at 12:20 pm #119191
    Ismael

    Hi,

    This really works. Please don’t remove the !important.

    .current-menu-item a {
    
color: red !important;
    
font-size: 20px !important;
    
font-weight: bold !important;
    
}

    This is what I see, when I apply the code above. The current page is “Welcome”.

    Regards,

    Ismael

    May 18, 2013 at 11:26 pm #119192
    jwferne

    I believe you, unfortunately the code isn’t doing anything :( Not sure what to do. I’ve tried putting it both in my custom.css and the Quick CSS. No change either way

    May 18, 2013 at 11:34 pm #119193
    jwferne

    Here, i’ve uploaded my custom.css. I don’t think there’s anything in here that would conflict, but you’re welcome to take a look at it.

    http://cl.ly/P4w5

    May 20, 2013 at 4:31 am #119194
    Ismael

    Hi,

    Do you have a cache plugin? Flush the cache settings. Remove browser history then reload the page.

    Regards,

    Ismael

    May 20, 2013 at 8:09 am #119195
    jwferne

    Bingo, that did it.

    Thanks Ismael.

    May 20, 2013 at 6:23 pm #119196
    Nick

    Glad that Ismael got you back on track!

    Thanks,

    Nick

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Menu Font Changes’ is closed to new replies.