[Resolved] Side menu dissapearing on mouse out – Can it be done with GP?

[Harris]

Thanks Tom,

The hint for hiding the header worked. If I won’t find any other solution till GPP 1.6 is released, I will update the topic.

[Tom]

Sounds good! Thanks! 🙂

[Harris]

One more thing that came up.
Where from can I adjust the vertical navigation settings? (width open, width closed etc)

Thanks
Harris

[Leo]

Is this what you are looking for? https://docs.generatepress.com/article/menu-item-height-width/

[Harris]

No Leo,
I am talking about the whole navigation block

Thanks
Harris

[Tom]

You can set the width of the slideout nav like this:

.slideout-navigation {
    width: 200px;
}

This is also going to change in GPP 1.6, so be sure to re-visit this topic once it’s released.

[Harris]

Thanks Tom!
Would you be kind enough to also let me know about the closed navigation width and the hamburger icon size, color and change (with another icon)?

Harris

[Tom]

Try this:

#site-navigation {
    min-width: 100px;
    text-align: center;
}

#site-navigation li.slideout-toggle {
    float: none;
}

#site-navigation li.slideout-toggle a {
    font-size: 30px;
}

What would you replace the icon with? An image?

[Harris]

Hello Tom

Is the first “command” for the closed navigation width and the other 2 for the hamburger icon size?

What about it’s color?

I asked how to replace the hamburger with another icon, but if yu canb also give me the code to replace it with an image I would appreciate it and keep it for future refference.

Thanks
Harris

[Tom]

The first block is the width, the second block is to center the icon and the third block is the icon size.

Color of the icon? Or the entire vertical bar?

To replace it with another icon, you would need to load the icon font, and then use the unicode like this:

.slideout-toggle a:before {
    content: "\f013";
}

That example being the cog icon: https://fontawesome.com/v4.7.0/icon/cog/

To use an image, you would do this:

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

[Harris]

Thanks Tom!

I was talking about the color of the icon. I have already changed the color of the entire vertical bar via customizer > Primary Navigation.

[Tom]

The color of the icon should be able to be adjusted in that same area.

In GPP 1.6, we added a whole new set of color options for the slideout navigation.

If you want to use CSS for now, you can do this:

.main-navigation .main-nav ul li.slideout-toggle a {
    color: #fff;
}

[Harris]

I had tried to adjust the color from the customizer, but it was changing together with the text color and I wanted a seperate color for the menu icon.

Thanks for the css!

Harris

[Tom]

You’re welcome 🙂

[Harris]

Hello,

Can you please let me know how can I give some pixels margin to the whole page body so when the menu is close, won’t cover the content?

Is it something like
.site-content {margin: 0 0 0 60px;}

And one more thing. How can I turn this menu in its normal (default) view when viewed on tablet and mobile?

Thanks

[Author]

Posts