[Resolved] Styling slideout

[Silvio]

Hi,

I am working locally on a clean installation. Could you help styling the slideout hamburger (I want to have the hamburger icon white on a circle black background) and navigation itself?

I can’t understand what are the class to target.

I would like it to appear like in svbtle.com

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Try this selector: .menu-toggle:before

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

I would need the code to style the slideout as it is in spacious. Where can i find this code?

[Leo]

This is the CSS used in Spacious:

/* Slideout navigation */

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

.slideout-navigation.main-navigation .main-nav ul li.close-slideout a {
    font-size: 0;
}

.slideout-navigation.main-navigation .main-nav ul li.close-slideout a:before {
    font-size: 18px;
}

.sf-menu > li.slideout-toggle {
	float: left;
}

.slide-opened .main-navigation.offside {
		transform: initial;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
		z-index: 100 !important;
}

.slideout-overlay {
	background-color: rgba(0,0,0,0.1);
	z-index: 99;
}

.close-slideout a:before {
	content: "\f00d";
	font-family: GeneratePress;
}

#generate-slideout-menu .close-slideout.sfHover a {
	color: inherit;
}

.slideout-navigation .main-nav {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.slideout-navigation .slideout-widget {
	padding: 15px 15px 0;
	font-size: 15px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

thx. I am missing the part to move the x to close the slideout from outside to over the hamburger. do you have even that?

[Leo]

I’m not quite sure if I understand.

Can you link me to the site in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

I would like to restyle the slide out as seen here sigul.svbtle.com

Spacious has something similar but it’s a mess to move it to the right.

[Tom]

There isn’t a way to use the same toggle to close the off canvas panel right now. However, there is a new option in 1.8 (https://generatepress.com/gp-premium-1-8/) that allows you to place the close button inside the panel – have you tried that?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Silvio]

amazing!

how can I place the “x” to close the off canva sidebar in the same place where the menu humburger is, so to fake an animation?

and how can I add a widget before the navigation?

thanks in advance!!!

[David]

Hi there,

can you link us to your site with the inside exit button so we can help with positioning.

The widget area can’t be (easily) moved, there is the inside_slideout_navigation hook that can be used for adding content before the menu.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

I moved it on a staging domain.

Here it is staging3.silviogulizia.com

credential to view it:
silvio
g8l1z14

additionally, I am now missing on the live version the hamburger and the x to close the offset, while I see them in the preview.

[David]

Try this CSS:

@media (min-width: 768px) {
    .slideout-navigation button.slideout-exit {
        position: relative;
        margin-top: 40px;
        padding-right: 60px !important;
    }
}

The icons are missing as your staging site has 404 errors for the font, its trying to get them from the live site.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

thanks, this helped styling it. I even found that using navigation as header helps aligning them. still need to test mobile.

how to you discover I am missing fonts? can you help fixing this?

[David]

I used the Browser Dev tools, right click and inspect the page, look at the Console tab and you will see several errors including the 404’s on the fonts.

These should have copied over when moving to a staging site, so you may want to check with your host if it is the host that provides the staging. If not you can use a plugin like search and replace to update those URLs.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Silvio]

thanks!

[Author]

Posts