• Resolved nadiastruiwigh

    (@nadiastruiwigh)


    Hi there!

    I have a question, I would like to change the background color, and if possible also the corners of the drop down menu in the mobile version.
    As I have a white font, it’s not visible anymore.

    If someone could help me, would be awesome!

    Thanks
    Nadia

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi Nadia, for this kind of problems it’s better to use some tools to figure out what to change in your custom css. Tools like Firebug, or Chrome’s/Safari’s developer tools.
    Said that, the drop down menu is “ruled” by these line, for example, in the blue.css:

    @media (max-width: 979px)
    .nav-collapse, .nav-collapse.collapse {
    overflow: hidden;
    height: 0;
    position: absolute;
    z-index: 3000;
    right: 0px;
    top: 42px;
    background-color: #fafafa;
    background-image: -moz-linear-gradient(top, white, #f2f2f2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, white, #f2f2f2);
    background-image: -o-linear-gradient(top, white, #f2f2f2);
    background-image: linear-gradient(to bottom, white, #f2f2f2);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    So you should put in your custom css, or in your child theme style.css this:

    @media (max-width: 979px)
    .nav-collapse, .nav-collapse.collapse {
    background-color: YOURCOLOR;
    background-image: -moz-linear-gradient(top, START_COLOR, END_COLOR);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(START_COLOR), to(END_COLOR));
    background-image: -webkit-linear-gradient(top, START_COLOR, END_COLOR);
    background-image: -o-linear-gradient(top, START_COLOR, END_COLOR);
    background-image: linear-gradient(to bottom, START_COLOR, END_COLOR);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='START_COLOR', endColorstr='END_COLOR', GradientType=0);
    -webkit-border-radius: YOUR_NEW_BORDER_RADIUS_IN_px;
    -moz-border-radius: YOUR_NEW_BORDER_RADIUS_IN_px;
    border-radius: YOUR_NEW_BORDER_RADIUS_IN_px;
    }

    so replace those YOURCOLOR, START_COLOR, END_COLOR, with the colors you choose (http://www.w3schools.com/cssref/css_colors.asp).
    About YOUR_NEW_BORDER_RADIUS_IN_px, for example if you don’t want round borders at all then replace those YOUR_NEW_BORDER_RADIUS_IN_px with 0px.

    Thread Starter nadiastruiwigh

    (@nadiastruiwigh)

    Wow thanks a lot!
    This is what i was searching for.
    I couldn’t find the code.

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

The topic ‘Drop down Menu background color, Mobile’ is closed to new replies.