3bar button

  • Resolved David_G

    (@questas_admin)


    9 years, 3 months ago

    I cannot figure out the correct selector for changing the color for the 3bar menu on mobile devices. I want to change it to black and hover to red. Thank You.

Viewing 15 replies - 1 through 15 (of 21 total)

  • Link to site?

    Thread Starter David_G

    (@questas_admin)

    aandsmobileauto.com

    Try this:

    .navbar .btn-toggle-nav .icon-bar {
    background: black none repeat scroll 0% 0%;
}
.navbar .btn-toggle-nav .icon-bar:hover {
    background: red none repeat scroll 0% 0%;
}
    Thread Starter David_G

    (@questas_admin)

    That didn’t work.

    May be a misunderstanding. Should have changed the 3 x bars to black?

    Thread Starter David_G

    (@questas_admin)

    Firebug is showing this for the 3bar but it also doesn’t work. Any other ideas?

    navbar .btn-toggle-nav .btn

    Slightly different version of the one rdell gave you:

    .navbar .btn-toggle-nav .icon-bar {
    background-color: black;
}
.navbar .nav-collapse.in + .btn-toggle-nav .icon-bar,
.navbar .btn-toggle-nav.hover .icon-bar { background-color: red;}

    Hope this helps.

    Thread Starter David_G

    (@questas_admin)

    Thanks d4z, that helped a little. The hover turns red but the static bars are still refusing to change.

    You have this:

    .navbar .btn-toggle-nav .icon-bar,
{
    background-color: black;
}

    while should be:

    .navbar .btn-toggle-nav .icon-bar{
    background-color: black;
}

    why that comma?

    Thread Starter David_G

    (@questas_admin)

    I was trying to combine the snippets. It’s still not working.

    What’s this?

    /* Change the color of all the Social Icons */
.navbar-inner a.social-icon                 {color:blue;}     /* Header */
footer#footer .colophon  a.social-icon      {color:blue;}     /* Footer */
font-size: 2em;
}

    what’s that

    font-size: 2em;
}

    ?
    which is just above the new rule and outside any other rule?
    Remove that or just put it inside some css rule.

    Thread Starter David_G

    (@questas_admin)

    It works now. Thanks a lot. ??

    Are you all seeing the responsive menu button (along with the text menu links) in google chrome on wide desktop mode? I don’t see the button in Firefox. I have “regular (horizontal)” as design. For some reason, the DIV element is being activated in Chrome. Also, the button does not work, it’s just displaying the button in Chrome.

    Thread Starter David_G

    (@questas_admin)

    Why is this conflicting with the 3bar code? When this is inactive then the 3bar is black (which is what I want) but when this snippet is active then I lose the black color on 3bar. 

    /* Change the color of all the Social Icons */
.navbar-inner a.social-icon                 {color:blue;}
footer#footer .colophon  a.social-icon      {color:blue;}

    infobeckettgraphics:
    your issue is most likely due to a caching plugin which isn’t loading the latest css, or to something you have in your child-theme.
    could you open a new topic?

    @questas_admin
    there’s no conflict with those two lines at all.
    The problem is, most likely, that your removed:
    font-size: 2em;

    but not the }

    as I told you above.
    You have this commented now:

    /* Change the color of all the Social Icons */
/*.navbar-inner a.social-icon                 {color:blue;}
footer#footer .colophon  a.social-icon      {color:blue;}
}*/ <- this ending } .. what's this?

    What’s that ending } ?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘3bar button’ is closed to new replies.

Tags