[Resolved] How do I control how fast the slideout is shown?

[Silvio]

Hi,

I would like the slideout appearing slowly, so it is full opened with more time. Could you tell which code to add in the custom css?

I am using the 1.8 beta.

Thanks in advance.

[Leo]

Hi there,

Give this CSS a shot:

.offside-js--interact .offside, .offside-js--interact .offside-sliding-element {
    -webkit-transition: -webkit-transform 1s cubic-bezier(.16,.68,.43,.99);
    transition: -webkit-transform 1s cubic-bezier(.16,.68,.43,.99);
    -o-transition: transform 1s cubic-bezier(.16,.68,.43,.99);
    transition: transform 1s cubic-bezier(.16,.68,.43,.99);
    transition: transform 1s cubic-bezier(.16,.68,.43,.99), -webkit-transform 1s cubic-bezier(.16,.68,.43,.99);
}

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

The default was 0.2s.

[Silvio]

thanks. any chance even to open up the slideout on hover?

[Tom]

Hmm, that would be tough. Is your site using jQuery?

[Silvio]

I totally ignore this, but it sounds probably. I think I have because I was using bigfootjs

[Tom]

You could try this function:

add_action( 'wp_enqueue_scripts', function() {
    $script = "jQuery( document ).ready( function($) {
        $( '.slideout-toggle' ).hover( function() {
            generateOffside.open();
            $( 'body' ).addClass( 'using-mouse' );
        } );
    } );";

    wp_add_inline_script( 'generate-offside', $script );
} );

[Silvio]

hi tom,

your code produced this error

Parse error: syntax error, unexpected '' ).hover( function() { ' (T_CONSTANT_ENCAPSED_STRING) in /home/new24551/staging/3/wp-content/themes/generatepress_child/functions.php on line 31

and I can’t understand why

[Tom]

Sorry about that! Can you try now?

[Silvio]

working! thanx!

anyway, I am trying to create an off canva toggle like the one on https://sigul.svbtle.com but is’t a bit of a mess with nav as header, mobile header, nav logo …

what would be the easiest way to have logo + site name on the left and hambuger for off canvas on the right both in the desktop and mobile header?

[Tom]

It should have that kind of layout by default. Can you show me?

[Silvio]

I went on and fixed it. But it’s a mess of different margin and padding.

this is the custom code I had to write. maybe I mess something, but it was not working as expected.

`/* header logo */
.site-logo {
float:left;
}
.site-logo img {
max-height: 30px;
max-width: 30px;
}

@media (min-width: 768px) {
.site-logo {
margin-right: 10px;
}
}

/* adjusting mobile header */

@media (max-width: 768px) {
.site-logo {
margin-left: 10px;
margin-top: 0px;
padding-top: 0px;
}
#mobile-header {
margin:10px;
}
}

/* offsite nav bar */

.slideout-overlay {
background-color: transparent;
}

.main-navigation.offside {
width:200px;
padding-right:20px;
border-left:1px solid #eee;
padding-top:10px;
}

.slideout-exit:before {
float:right;
font-size: 25px;
}

@media (max-width: 768px){
.site-logo img {
margin-left:-10px;
}
.main-navigation.offside {
margin:0;
padding-right:0px;
padding-top: 0px;
}
.menu-toggle:before {
margin-right:0px
}
.slideout-exit:before {
margin-right:-5px;
margin-top:0px
}

}

If I remove my custom code, logo is at the right of site title, slideout is not aligned with menu toggle, and sticky nav is missing the site branding. And still I have an issue with the slideout toogle.

I mean, I expected once I set nav as header, I can simply choose if adding logo, site title or both, and have the hamburger aligned with them, and with the slideout exit button.

[Tom]

I mean, I expected once I set nav as header, I can simply choose if adding logo, site title or both, and have the hamburger aligned with them, and with the slideout exit button.

This is the standard behavior. I would have to see your site without your custom CSS to know what was conflicting with it.

[Silvio]

I started again with a clean install, and as a matter of fact I did some mess. But, again, is not everything aligned by default.

here’s the custom code I came out with (some not related to that):

#site-navigation {
	margin:10px;
}

/* offsite nav bar */

.slideout-overlay {
	background-color: transparent;
}

.main-navigation.offside {
	width:200px;
	padding-right:10px;
	border-left:1px solid #eee;
	padding-top:10px;
}

.slideout-exit:before {
	float:right;
	font-size: 25px;
}

@media (max-width: 768px){
	.site-logo img {
		max-width:35px;
		margin-left:10px;
	}
	#mobile-header {
		margin-top:10px;
	}
	
  .main-navigation.offside {
		margin:0;
		padding-right:0px;
		padding-top: 0px;
    }
	.slideout-exit:before {
		margin-right:-5px;
	}
}

/* header logo */
@media (min-width: 768px) {
.site-logo img {
	max-height: 55px;
}
}
	

/* Slideout on hover */

.site-navigation:is_stuck .inside-navigation  {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.main-navigation:not(.is_stuck) .sticky-brand {
	display: none;
}

.offside-js--interact .offside, .offside-js--interact .offside-sliding-element {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.16,.68,.43,.99);
    transition: -webkit-transform .3s cubic-bezier(.16,.68,.43,.99);
    -o-transition: transform .3s cubic-bezier(.16,.68,.43,.99);
    transition: transform .3s cubic-bezier(.16,.68,.43,.99);
    transition: transform .3s cubic-bezier(.16,.68,.43,.99), -webkit-transform .3s cubic-bezier(.16,.68,.43,.99);
}

/* offcanvas welcome */
.nav-welcome h3 {
	font-weight: 700;
}

.nav-welcome p {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
}

/* this aligns menu inside offcanva */

.nav-welcome, #generate-slideout-menu .slideout-menu li a {
	text-align:right; 
	padding-right: 10px;
}

/* typography */

blockquote {
    border-left: 8px solid #000;
    padding: 0 18px;
    font-size: 1em;
    font-style: italic;
    margin: 0 0 1.5em -10px;
    position: relative
}

.entry-content a {
padding-bottom: 2px;
border-bottom:2px solid #e1e1e1
}

.entry-content a:link,
.entry-content a:visited,
.entry-content a:hover,
.entry-content a:active {
 text-decoration:none;
 transition-property:all;
 transition-duration:0.2s;
 -webkit-transition-timing-function:cubic-bezier(0.165, 0.63, 0.14, 0.82);
 -moz-transition-timing-function:cubic-bezier(0.165, 0.63, 0.14, 0.82);
 -ms-transition-timing-function:cubic-bezier(0.165, 0.63, 0.14, 0.82);
 -o-transition-timing-function:cubic-bezier(0.165, 0.63, 0.14, 0.82);
 transition-timing-function:cubic-bezier(0.165, 0.63, 0.14, 0.82);
 -webkit-font-smoothing:antialiased
}
.entry-content a,
.entry-content a:visited {
 color:#333;
 text-decoration:none;
 outline:0
}
.entry-content a:hover,
.entry-content a:focus {
 color:#000;
 border-bottom: 2px solid #333;
}

input[type="email"] {
border-radius:0px;
background:transparent;
border:none;
border-bottom:1px solid gray;
}

input[type="submit"] {
border-radius:50px;
background:#000;
color:#fff;
border:2px solid #222;
margin:20px;
}

@media (max-width: 768px) {
input[type="email"], input[type="submit"] {
	width:100%;
	margin:10px 0;
    text-align: center;
	}
}

.entry-meta {
	color:#1d1d1d;
	font-weight:700;
	opacity:0.15;
    margin-top:5px;
}

.entry-meta:hover {
	opacity:1;
	transition-property:all;
	transition:.55s;
}

.posted-on .updated:before {
    content: "Aggiornato: ";
}

.posted-on .updated {
    display: inline-block;
}

.posted-on .updated + .entry-date {
    display: none;
}

/* structure */

.after-content {
margin: 40px 0;
}

.after-content p {
	Font-size:14px;
}

.after-content H4 {
	margin-bottom:0px;
}

/* title in the sticky navigation */
#sticky-navigation a {
	margin-top:10px;
	margin-bottom:10px;
}

#sticky-navigation p {
	font-size:15px;
}

.home-nav {
	font-size:.8em;
}

It’s probably related to my customization (and still I have to come up with something that keeps all aligned the slideout exit button with the menu toggle button when the navigation is sticky).

Basically, it would be helpful to have a tutorial to keep things aligned when managing the header / navs.

[Tom]

Things should all be aligned by default. I’d need to see your site without any of the custom CSS to know why things aren’t aligning for you. Is that possible?

[Silvio]

Here it is: generatepress.silviogulizia.com I recreated it without css.

I realized the main issue was generated by trying to add logo and title in the sticky nav. but as you can see on the clean installation, the slideout exit button is not aligned and doesn’t keep the size of the nav, and in the mobile header the logo in the mobile header had no padding and was attached to the edge of the screen.

then I went back to mine staging3.silviogulizia.com and was able to get to this:

/* this aligns menu inside offcanvas */

.nav-welcome, #generate-slideout-menu .slideout-menu li a {
	text-align:right; 
	padding-right: 10px;
}

.slideout-exit:before {
	float:right;
	font-size: 25px;
}

.slideout-navigation button.slideout-exit {
		padding-right: 5px;
}

#mobile-header .inside-navigation {
	margin:10px;
}

#mobile-header .menu-toggle {
padding-right:0px;}

I would really appreciate if you wrote an article about keeping things aligned in the header.

[Author]

Posts