Twenty Twelve Nav Styling

  • Hi,
    I am having an issue styling the Twenty Twelve drop down navigation.
    I want the drop down to be styled independently of the main navigation but anything style changes I make are also applied to the drop down.

    I have also created `ul.sub-menu {
    }`
    which I can not really do much with because it is being replaced with CSS from .main-navigation li ul {}

    I have searched the header.php and the functions.php for where the function is that builds the nav but have been unable to find it.

    Any help would be wonderful. Thank you very much.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Are you using a Child Theme? Are you using @media queries to target particular screen sizes with your changes – twentytwelve is coded “mobile-first”…

    Link to your site would be necessary for more help with CSS.

    Thread Starter Gtru1021

    (@gtru1021)

    https://ct-social.com/ctsdev/christiepie/

    Changing the name on twentytwelve (vs. using a Child Theme) is not ideal, but aside from that, in most cases, you should be able to do styling using just CSS. What are you trying to do? Are you using a browser tool like Firebug to work with CSS?

    Thread Starter Gtru1021

    (@gtru1021)

    I’ve found using a child theme breaks my theme when ever the parent is upgraded with any style changes.

    I am trying to style the drop down menu without it changing any of the style for the Nav bar.
    I am using the inspect element on Chrome.

    If that’s the case, sounds like your child theme is not set up correctly :).

    Where are you making CSS changes? Have you tried here:

    .main-navigation li ul li a {
    background: none repeat scroll 0 0 #EFEFEF;
    border-bottom: 1px solid #EDEDED;
    display: block;
    font-size: 0.785714rem;
    line-height: 2.18182;
    padding: 0.571429rem 0.714286rem;
    white-space: normal;
    width: 12.8571rem;
}
.main-navigation li ul li a:hover {
    background: none repeat scroll 0 0 #E3E3E3;
    color: #444444;
}

    Thread Starter Gtru1021

    (@gtru1021)

    I have tried editing both of those and they do not affect the drop down styling for me.
    I even out right removed it, with no change.

    Thread Starter Gtru1021

    (@gtru1021)

    .main-navigation li {}
    Comes up as being the main source for the CSS. But when I edit that, the entire nav gets all messed up.

    It seems I can not make any changes to only the drop down, without affecting the entire navigation.

    Thread Starter Gtru1021

    (@gtru1021)

    Something that is really messing with me is for the

    <ul class="sub-menu">

    .main-navigation li ul {} is the CSS style that affects it (and affects the main nav as well.)

    I added .ul.sub-menu {} and it does not affect <ul class="sub-menu">
    Why is this?

    Also does anyone in what file the navigation is created? I can not seem to find it.

    Thread Starter Gtru1021

    (@gtru1021)

    Thanks for the help!

    Toying around I found that I could manipulate the drop down with
    ul.sub-menu {}
    ul.sub-menu .current-menu-item > a {}
    ul.sub-menu li {}
    etc..

    They were not in there I had to add them. Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twenty Twelve Nav Styling’ is closed to new replies.