[Support request] Hide menu title

[Mårten]

Hey guys!

How do i hide the menu title on mobile? Right after the burger, “Meny” shows up. Can i hide it?

I also having issues with the slide out nav on mobile. Is it possible to get the background color across the screen and that the menu is centered?

Hope you can help me out!

Thanks!

[David]

Hi there,

in the Customizer > Layout > Primary Navigation > Mobile Menu Label – just remove the text.

To make the Slideout nav to full screen would take some code, Tom provides a starting point here:

https://generatepress.com/forums/topic/mobile-hamburger-slideout/#post-258884

[Mårten]

Hi,

It doesn´t seem to work.
Ang when I enable the slideout nav, the menu does not appear. Only the “background box”.

[Leo]

Does this help?
https://docs.generatepress.com/article/activating-slide-out-navigation/#empty-slideout-navigation

[Mårten]

The menu is now displayed. But the background does not appear on the entire screen.

[David]

So full screen will take a few steps.

1. Create a new menu specifically for the slideout navigation.

2. We need to create a custom exit button. So add a custom link to the menu with these settings:
URL: #
Navigation label: <span class="screen-reader-text">Close</span>
CSS Classes: slideout-exit custom-slideout-exit

3. Add this CSS:

.slide-opened .slideout-exit:before {
    display: none;
}

.custom-slideout-exit a {
    text-align: center;
}

.custom-slideout-exit a:before {
    content: "\f00d";
    font-family: GeneratePress;
    line-height: 1em;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
}

.main-navigation.offside {
    width: 100%;
}
.offside--right {
    right: -100%;
}
.offside--right.is-open, .offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#generate-slideout-menu .slideout-menu li {
	text-align: center;
}

[Author]

Posts