The hamburger icon has vanished from sight

After searching on Stack Overflow for a solution, I realized that the issue I am facing might be related to some modifications I made to the style.css file regarding the header. It appears that these changes have caused the hamburger menu to either be pushed off the screen or the color needs adjusting. When someone first visits my site, the menu items are displayed as words instead of a collapsed menu, and then they disappear. I am currently working on WordPress, using the Genesis framework for my website - shinwag.com

.responsive-menu-icon {
    cursor: pointer;
    display: none;
    text-align: center;
}

.responsive-menu-icon::before {
    content: "\f333";
    display: inline-block;
    font: normal 20px/1 'dashicons';
    margin: 0 auto;
    padding: 10px;
}

.site-header .responsive-menu-icon::before {
    padding: 0;
}

Answer №1

at line 1959 In the .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, and .genesis-nav-menu.responsive-menu classes, ensure display:block; is added instead of display:none;

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

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

Hovering over an SVG icon will trigger an animation

I am trying to achieve an animated effect on an SVG line icon only when it is hovered over. I want the icon to remain static when not being hovered. While I have managed to animate the drawing effect and make it work somewhat on hover, I am facing an issue ...

I'm having trouble getting the font to display properly on Safari (mac) similar to how it appears on

Recently, I completed a website for a client at . The owner requested the footer text to be styled similarly to the footer text on . However, upon review, it seems that the font in the lists on desiringgod appears thinner compared to the site I built. Thi ...

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

"Achieving Alignment: Placing a Div Element Inside an H

I am in the process of building a portfolio for freecodecamp, but I am having trouble with centering the button and row div on the page. The row div is necessary because I will be adding more buttons later on, but for now I just need the FCC button. Below ...

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework. I'm wondering if there's a way to automatically adjust all the columns to the height of th ...

AngularJS does not update values properly if there is a style applied to the parent container

I'm struggling to find the best approach to handle this situation. This is how my AngularJS code looks: <span class="something" ng-hide="onsomecondition"> {{value}} </span> .something{ text-align:left; padding:10px;} Issue: The value ...

The header, main content, and footer sections expand to occupy the entire page

I am in need of HTML structure that looks like the following: <header></header> <div id='main'></div> <footer></footer> I want all elements to be positioned relatively. The header and footer will have fixed h ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

Show the combined weight of products in the WooCommerce Admin Orders section

Currently, I have implemented a script that calculates and displays the weight of each order in a separate column on my woocommerce website's orders page. While this setup works effectively, it does require recalculating everything with each page load ...

Is it necessary to incorporate iOS default controls into my HTML code?

Currently in the process of developing a cordova app, I am inclined to steer clear of default popups like the spinner triggered when selecting an item <select></select> (I plan on crafting my own dropdown tailored for mobile use). Additionally, ...

Expand the dimensions of the bootstrap navigation bar

Is there a way to expand the Bootstrap nav bar to fill the entire screen? Currently, it only occupies half the screen in desktop view, but it is working fine in mobile optimization. <body> <nav class="navbar navbar-expand-lg navbar-light bg-lig ...

Troubleshooting problems with the height of nested DIV elements

Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...

Is it possible to change the CSS of a parent element using a child element?

My current challenge involves altering the background-color of a parent <td> element, without being able to directly modify the HTML structure. The software system utilized at my workplace strictly relies on SQL queries for data manipulation and gene ...