Disable Header, Change Menu Icon?

[Sean]

So I’m thinking I would like to disable the Header on my website, completely! And instead have my Menu button be a different looking icon(instead of the 3 lines). And with that being said, have my navigation always at the top(sticky). The only issue with the sticky menu, is when you scroll, it lags behind. I’d probably say the laggy sticky menu is the least of my worries on this list though, since the addition of the “Top Button” kind of helps with this already(takes user to the top where the menu is).

[Tom]

Hi there,

To disable the site header, use this CSS:

.site-header {
    display: none;
}

To change the menu icon, change the unicode to whatever you like in Font Awesome:

.menu-toggle:before {
    content: "\f0c9";
}

Let me know if you need more info 🙂

[Sean]

So it has to be from that “Font Awesome”, it can’t be my own .png? Also, is it possible to hide the scroll bars in the users browsers? I saw there are ways to do it on website, just curious if there’s a CSS code I could use to disable both the vertical and horizontal bars.

[Tom]

It can be an image:

.menu-toggle:before {
    content: url( "URL TO YOUR IMAGE" );
}

You can disable all scrollbars (not recommended) like this:

html, body {
    overflow: hidden;
}

[Sean]

Sweet, definitely going to try that in a minute. And I see why you don’t suggest disabling scrollbars. Literally disables scrolling in general. Dang. I just hate how the slideout menu takes the scroll bar away, and when you get out of the slidemenu it’s there again.

[Tom]

I’ve spent hours trying to find a better way to handle that, but removing/adding the scrollbar is the clear winner when it comes to usability I’m afraid, at least for now.

[Sean]

Alright, I made my own make-shift way of getting around that. Here’s my site: http://sj3.me/

Is there a way, for when in Mobile View, to replace the icon with just the normal text? That way you don’t have to click twice to get the menu drop down? So pretty much skip the awesome font icon that’s there, and show the default menu I have by default on all device.

[Tom]

Sorry for not getting back to you sooner – looks like you might have changed things up? Looks great!

[Baavo551]

Question 1:
Is it really enough to remove Generatepress default menu with only CSS ?

.site-header {
display: none;
}

Do I still have 2 menus in the DOM ?
but one menu is just deleted visually with above CSS.
I’m Using Elementor Nav Menu element, so I dont need generatepress default nav menu.

Question 2.
Above CSS also removes Page title and description, are these mandatory for anything, SEO maybe ?
https://imgur.com/a/HY2iK

[Leo]

Hi there,

1. You can set the navigation location to No Navigation: https://docs.generatepress.com/article/navigation-location/

Header can be removed with this function: https://docs.generatepress.com/article/generate_header/

2. It shouldn’t matter if you have logo/title inserted using Elementor

[Author]

Posts