简体   繁体   中英

How can I make the menu button visible on mobile wordpress site?

I'm using a theme from BoldGrid called Vacation and it has some css that I edited but for some reason I am unable to change the menu button (the three lines that you click for a full menu) on mobile to be red (#960000) and white(#fff). Any ideas what I'm doing wrong? Where should I input the code for the colors? Right now the three lines are invisible until clicked.

/*-----------------------------------------------
## Main Menu
-----------------------------------------------*/
/* Typography */
.navbar-default .navbar-nav {
    float: none;
    margin: 0 auto 10px;
}

/* Nav Center */
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

/* Nav links */
.navbar-default .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Nav hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background: none;
}

/* Nav active */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: none;
}

/* Nav reset */
.navbar {
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.navbar-default {
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

I'm sorry for the troubles you're having with the BoldGrid Vacation theme! I looked into this issue with the theme, and realized that there are hardcoded values in the sass color palette file that are causing the issues for you. In our next release of the theme, I've addressed this issue so others can have this fixed as well here: https://github.com/BoldGrid/vacation/commit/0ce7953e1f4fa1fe866db4ede290cc2e2d31036a

This would give the toggle menu and icon bars the color of #545454 (dark gray) or #fff (white) depending on what color is used as the first color in your palette. In your case that color is white, so the icon and bars would be a dark gray color.

Since you want to make these the red that you're using in your palette, the best way to ensure that your changes stay in place whenever you update the theme is to use the custom CSS editor in the WordPress Customizer.

You can access this by going to the Customizer, and then Advanced > Custom JS & CSS, then click on the button that says "Open Editor".

If you've never used this feature before, there's an example snippet of CSS in there that you can erase.

You can copy and paste this code in:

.palette-primary .navbar-default .navbar-toggle {
    border-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle .icon-bar {
    background-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle:hover,
.palette-primary .navbar-default .navbar-toggle:focus {
    background-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle:hover .icon-bar,
.palette-primary .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #fff;
}

Then click the X button in the top right corner, and press Save & Publish if your preview looks the way you wanted it.

This will make sure that your custom CSS stays in place as you update the theme in case we make any style changes that may conflict with your own custom styles.

It's because the colour is actually handled with background colour...the style below is what controls the colour of those lines. You need to make sure you use the proper class structure when you want to override the bootstrap styles.

.palette-primary .navbar-default .navbar-toggle .icon-bar, .palette-primary .navbar-default .navbar-toggle:hover, .palette-primary .navbar-default .navbar-toggle:focus {
    background-color: #fff;
}

The menu button you referred as three lines are known as Hamburger icon

Add or override the below css rule in your css

.palette-primary .navbar-default .navbar-toggle .icon-bar, .palette-primary .navbar-default .navbar-toggle:hover, .palette-primary .navbar-default .navbar-toggle:focus { background-color: #960000; }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM