[Resolved] Styling slideout

Home Forums Support [Resolved] Styling slideout

Home Forums Support Styling slideout

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

    #861570
    Leo
    Staff
    Customer Support

    Hi there,

    Try this selector: .menu-toggle:before

    Let me know if this helps 🙂

    #861572
    Silvio

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

    #861581
    Leo
    Staff
    Customer Support

    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;
    }
    #861587
    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?

    #861695
    Leo
    Staff
    Customer Support

    I’m not quite sure if I understand.

    Can you link me to the site in question?

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

    #862137
    Tom
    Lead Developer
    Lead Developer

    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?

    #862505
    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!!!

    #862651
    David
    Staff
    Customer Support

    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.

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

    #863803
    David
    Staff
    Customer Support

    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.

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

    #863863
    David
    Staff
    Customer Support

    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.

    #864149
    Silvio

    thanks!

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