Replace full menu with responsive "hamburger" menu all the time

Illdy
1

I’m wondering whether there is a way to always show just the expandable hamburger menu icon (like it does on a phone or tablet) in the header (instead of the full menu) all of the time, even on a larger computer screen. (site: www.heartriverlutheran.org)

Thanks for any help you can give!

2

Hello @pkaddy,

You should use this CSS to achieve the behaviour:

.open-responsive-menu{
display: block !important;
}
.header-navigation{
display: none !important;
}

This code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.

Let me know if it’s working as expected.
Regards

3

Thank you. That mostly did it. The only catch is that the front page hamburger menu and its expanded menu when clicked do not keep the formatting (color, style, placement) that it has on the other pages and blog posts. Still trying to figure out how to make it use that formatting. Any ideas for me?

This is a really great theme, BTW. Kudos to you and the rest of the team.

4

Hello @pkaddy,

It seems to me that you’ve used some 3rd party solution, have you managed to get this fixed?

Regards

PS: Thank you very much for the kind words!

5

I haven’t used a 3rd party solution. I added a couple tweaks to the color and placement of the hamburger menu, and I did get it to appear the same on all pages.

The problem I am having is that it is a different style when the screen (or browser window) is wide compared to when it is narrow. The menu icon looks different from the theme and, when clicked, it just shows a bullet list for the menu instead of the the theme’s format. I want it to behave on wider screens like it does on narrower screens. Besides that, I’d like to change the white hamburger menu button to blue so it’s visible against the background. Does that make sense?

6

I think the answer may be in getting rid of the CSS that I’ve added and instead add something that uses some kind of @media query to tell it at what screen size to toggle - essentially forcing the menu to stay in its smaller screen responsive format. That, and then changing the color of the 3-line hamburger menu button.

Does that make sense? If so, what might be the code I’m looking for?

7

Hello @pkaddy,

Indeed, the menu styling seems to be loading only on small screens, that’s why I was confused about using a 3rd party menu solution.
Try using this CSS to get it working:

@media only screen and (min-width: 1px){
.responsive-menu ul li a {
    width: 100%;
    padding: 15px;
    display: block;
    border-bottom: 1px solid #e4e4e4;
    color: #000;
    text-align: center;
}}
@media only screen and (min-width: 1px){
.responsive-menu ul li {
    width: 100%;
}}

Let me know if you managed to get it working alright.

Regards

Regards