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

Home Forums Support How do I control how fast the slideout is shown?

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #864416
    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.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #864451
    Leo
    Staff
    Customer Support

    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.

    #864649
    Silvio

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

    #865268
    Tom
    Lead Developer
    Lead Developer

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

    #865333
    Silvio

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

    #865516
    Tom
    Lead Developer
    Lead Developer

    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 );
    } );
    #866548
    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

    #866618
    Tom
    Lead Developer
    Lead Developer

    Sorry about that! Can you try now?

    #866629
    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?

    #867268
    Tom
    Lead Developer
    Lead Developer

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

    #867437
    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.

    #867542
    Tom
    Lead Developer
    Lead Developer

    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.

    #868128
    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.

    #868199
    Tom
    Lead Developer
    Lead Developer

    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?

    #869299
    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.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.