Need Help Editing Mobile Navbar Dropdown Button

  • Resolved wildgearhq

    (@wildgearhq)


    9 years, 5 months ago

    Theme: Funding Press
    URL: http://www.wildgearhq.com/shop/

    I am using a Custom CSS plugin to edit my site’s appearance. I have tried numerous code to change the color of the mobile navbar, but I haven’t had any luck.

    I would like the mobile navbar to have a white background, with the 3 brick icon in the middle of the mobile navbar colored black.

    (It would also be nice to remove the shadow and the spacing of the text on the drop down menu.)

    Here is the code I have tried so far:

    /*Attempting to change mobile navbar button */

    button.navbar-toggle
    {
    background-color: #FFFFFF;
    background: #FFFFFF;
    color: #FFFFFF;
    }

    ul.dropdown-menu {
    background-color: #FFF;
    font.color: #000;
    text-shadow: none;
    }

    /*Attempt to change navbar button background color*/

    .navbar.button-default {
    background-color:#fff;
    border-color: #000;
    }

    /* Attempt to Change Background Color of Mobile Navbar Menu” */

    @media only screen(max-width:767px)
    {
    .navbar {
    background-color: white;
    border: 0px none;
    border-radius: 0px !important;
    text-align: left;
    }
    }

    @media only screen(max-width:320px)
    {
    .navbar {
    background-color: white);
    border: 0px none;
    border-radius: 0px !important;
    text-align: left;
    }
    }

    /*Attempt to change navbar*/
    div.navbar-wrapper.navtransparent
    {
    background: #FFFFFF;
    border: 2px;
    border-color: #000000;
    }

    /*Navbar */
    .navbar-inverse .navbar-nav > li > a {
    font-family: Lato, arial;
    font-style: normal;
    color: #333;
    font-size: 16px;
    opacity: 1;
    -webkit-transition: opacity 0.24s ease-in-out;
    -moz-transition: opacity 0.24s ease-in-out;
    transition: opacity 0.24s ease-in-out;
    transition: all 0.4s;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 90px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    min-width: 90px;
    padding: 0 15px;
    background: white;
    }

    /*START OF Change 3-Bar Menu Button Color*/

    .navbar .btn-toggle-nav .icon-bar {
    background-color: #FFFFFF !important;
    }

    .sticky-enabled .navbar .navbar-inner .btn-toggle-nav .icon-bar,
    .tc-sn-visible .btn-toggle-nav .icon-bar {
    background-color: #FFFFFF !important;
    }

    .navbar .btn-toggle-nav.hover .icon-bar,
    .sticky-enabled .navbar .navbar-inner .btn-toggle-nav.hover .icon-bar,
    .tc-sn-visible .btn-toggle-nav.hover .icon-bar {
    background-color: #FFFFF !important;
    }

    /*END OF Change 3-Bar Menu Button Color*/

    It seems that no matter what I try I am unable to fix the problem…

    Any help would be greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • j09

    (@j09)

    9 years, 5 months ago

    1- To Remove Text Shadow in Menu Items and remove spacing

    

@media (max-width: 992px)
body .navbar-inverse .nav>li>a {
       padding: 0;
    /* text-shadow: 0 1px 2px #000; */

}

    2- To Make Nav Bar White

    
body .navbar-inverse .navbar-toggle {
    background: #fff;
    
}

body .navbar-inverse .navbar-toggle:hover, body .navbar-inverse .navbar-toggle:focus {
    background: #fff;
}

    3- To Make Menu Icon Black

    
.fa {
    color: #000
}
    Thread Starter wildgearhq

    (@wildgearhq)

    9 years, 5 months ago

    Thank you!

    Everything worked perfectly except for changing the text shadow and space of the menu.
    I used the following code:

    @media (max-width: 992px)
    body .navbar-inverse .nav>li>a {
    padding: 0;
    text-shadow: 0 0px 0px #000;

    }

    Using this code, “body” appears red, and “>li>a” also appears red.

    I altered the code to the following with no luck:

    @media only screen (max-width: 992px)
    { body .navbar-inverse .nav.li.a
    {
    padding: 0;
    text-shadow: 0 0px 0px #000;
    }
    }

    • This reply was modified 9 years, 5 months ago by wildgearhq.
    Thread Starter wildgearhq

    (@wildgearhq)

    9 years, 5 months ago

    Nevermind I got it! Thank you again!

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

The topic ‘Need Help Editing Mobile Navbar Dropdown Button’ is closed to new replies.