Is there a way to ensure the menu button is visible on my mobile WordPress site?

I recently customized the CSS of my BoldGrid Vacation theme, but I'm running into an issue where I can't seem to change the color of the mobile menu button (the three lines that you click for a full menu) to red (#960000) and white(#fff). Any suggestions on what I might be doing wrong? And where should I insert the code for these colors? Currently, the three lines are only visible when 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;
}

Answer №1

I understand the challenges you're facing with the BoldGrid Vacation theme. After investigating the issue, I found that hardcoded values in the sass color palette file are causing the problems. To address this issue in the next theme release and help others facing similar issues, I have made necessary changes. You can find the update here: https://github.com/BoldGrid/vacation/commit/0ce7953e1f4fa1fe866db4ede290cc2e2d31036a

The toggle menu and icon bars will now reflect the colors #545454 (dark gray) or #fff (white), depending on your palette's first color choice. Since your primary color is red, you may want to customize these elements to match your brand.

To ensure your customizations remain intact through theme updates, it's advisable to use the custom CSS editor within the WordPress Customizer. Simply navigate to Customizer > Advanced > Custom JS & CSS, and click "Open Editor".

If you're new to this feature, there's a sample CSS snippet that you can delete. Feel free to paste the following code:

.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;
}

After pasting the code, close the editor by clicking the X button and ensure your preview looks as desired before saving and publishing. This step guarantees that your custom styles persist even during theme updates with potential conflicting style changes.

Answer №2

The reason for this is that the color is actually managed through background color...the code snippet below controls the color of those lines. It's important to ensure you use the correct class structure if you want to override the default 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;
}

Answer №3

The symbol with three lines that you mentioned is actually called the Hamburger icon

To customize the appearance, you can apply or replace the following CSS rule in your stylesheet:


   .theme-dark .navbar-custom .nav-toggle .line-1, 
   .theme-dark .navbar-custom .nav-toggle:hover, 
   .theme-dark .navbar-custom .nav-toggle:focus {
      background-color: #55005A;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

What is the reason for Javascript's inability to apply height using the ex unit measurement?

Is there a way to use JavaScript in order to increase the height of an element based on its current CSS height value? I've been able to do it using px units, but not with ex units. Can anyone provide a solution for this? Here is the HTML structure: ...

Creating a Responsive Table with HTML and CSS in Magento

I'm having trouble formatting a table on my Magento website using the HTML Code Element. Even with responsive media types, the table is still extending off the screen on mobile devices. Check out my Magento Responsive Table for Mobile <style&g ...

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

Using Bootstrap for Fixed Headers and Section Anchors

Despite my best efforts, I am struggling to resolve an issue with my fixed bootstrap navbar and internal links. I have experimented with various solutions, including using a JavaScript onscroll event listener and applying styles directly in the markup. How ...

When attempting to send a POST request to a Web App, the doPost method is executed; however, an error code of

Scenario: I've set up a Wordpress website on an AWS server and I'm trying to send a POST request to a Google Apps Script Web App. My PHP code for the request looks like this: $request_obj = array( 'data' => array( ' ...

Having trouble with the JQuery Cookie Plugin? Getting an error message that says "undefined is

I've been attempting to utilize the JQuery Cookie plugin, but I'm facing some troubles with my code. Below is the snippet that's causing me headaches: jQuery("#orderBtn").click(function(event){ jQuery(".order-alert").show(); ...

Issue with a variable causing a reference error in Wordpress JavaScript

As someone who is relatively new to Wordpress theming, I've come across a common issue with Jquery $ code and how it can be misunderstood by Wordpress. It's recommended to use jQuery(document).ready(function($) {} instead of just plain $(.) code ...

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...

Center text vertically inside a form

I have attempted various solutions provided in previous responses, but none have proven effective for my situation. The challenge I face is aligning the bar vertically within this form. <form action="index?q=<?php echo $_POST['query']? ...

Javascript enables the magnetization of cursor movements

Can a web page be designed so that when users open it and hover their mouse over a specific area outside of an image, the mouse is attracted to the image as if by a magnet? Is this idea feasible? Any suggestions would be appreciated. ...

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

Modifying Link Hover Colors with CSS and PHP

One of the challenges I am facing is managing a file that contains an array of navigation links. This setup allows me to easily add new links to the navigation menu without manually updating multiple files. However, I am struggling with assigning different ...

CSS word-wrap property not functioning within a div element

I am currently using the ionic framework to iterate words from a database. However, I am facing an issue where the words span across the div and do not break when reaching the end of the div; instead, they are truncated. I have tried applying the break-wor ...

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

The use of .hidden in Tailwind-CSS does not result in the application of flex or block styles to the element

My intention is to hide the div on small screens and display it on larger screens starting from md: However, it seems like the .hidden class has a higher priority or may be interfering with some of my dependencies. <div className="hidden md:flex&qu ...

Adapting CSS grid columns based on device screen size

I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve: On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections ...

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...