[Resolved] Make Slideout Navigation appear from top instead from sides

[David]

The latter oneL add the hide-on-desktop class to the menu item. Its a GP class so no additional CSS required.

Hmmm….. safari causing a pain. In the code, where we have 150% and -150%, i added this for menus that may extend past the length of the screen. Reduce them down to 100%. And then we can have another look.

[Ivan Cazorla]

thanks, just added the class and set all 150% to 100%. take a look.

thanks,
Ivan

[David]

You see i knew i added it for a reason lol so put it back to 150% – might need a bit of a rethink lol

[Ivan Cazorla]

Haha i know. By the way, I just made the background X on mobile black, but I’m having troubles with the hover change of color. How can I keep it black?

Also, what does the calc(150%) exactly do? And why 150%?

thanks,
Ivan

[David]

Then give this a shot:

.main-navigation.offside {
	height: 100% !important;
}

[David]

For the colors you will need to target these classes and set the background color and text color: .

`custom-slideout-exit a:visited, .custom-slideout-exit a:hover’

You can actually get rid of the calc( ) now and just add the 150% – its a CSS way of doing maths.

[Ivan Cazorla]

It works like a champ!! You’re awesome. By the way, aren’t those two the same class?

thanks,
Ivan

[David]

Haha yes – edited the code, for hover.
You’re welcome – nice looking nav 🙂

[Ivan Cazorla]

Thanks!! Hope this website can be showcased on “made with Generatepress” when its finished. Just one more thing, why isn’t this working?

.custom-slideout-exit a:visited, .custom-slideout-exit a:hover {
    background: #000;
    color: #fff;
}

Is it also possible to block the scrolling when the menu is opened?

thanks,
Ivan

[David]

If it is to be black and white the time then add the .custom-slideout-exit a to that rule.

Sorry. I haven’t found a good solution for scroll blocking….. still looking

[Ivan Cazorla]

thanks! it still becomes white background when hovering. i don’t know why. let me know.

update
Solved it adding !important to the colors. let me know if you find the scroll blocking and we’ll be done. thanks!!

appreciate it,
Ivan

[David]

You’re welcome 🙂

[Ivan Cazorla]

thanks

[Author]

Posts