[Support request] Problems creating vertical menu at left side

Home Forums Support Problems creating vertical menu at left side

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1408648
    CREATIVA GRAFICA

    Hello,
    I hope you can help me with this problem.
    I need to convert my header as a left custom menu-bar/header area.
    I’ve installed a new fresh-installation (in a demo site) importing one of the generate press demo with that design.
    there i’ve seen the css in the template.

    In my production website, i finally could add a left space… but there appear the logo and the webtitle… The menu bar didn’t stay in that bar, it still on the top.

    I want to insert in that (white) space my own creation with elementor… but i don’t understand how to eliminate all in that left-sticky space to insert elementor designs.

    (i’ve seen that i can’t create an elementor header because it appear at top, in an standar situation not in that new white column)

    Can it be done?

    I’ve browsed along the internet: youtube, google, your website, but i did’nt find what i’m searching for.

    I’ve seen that GP ‘elements’ can work with header… but when i create an option with an elementor element (with a sortcode), it appear on the top of the image, not at left in the white space

    Please, can you bring me any kind of help?

    Thanks in advance.

    Xavs
    ScreenCapture
    the code i’m using to obtain that left space is:
    (i think it’s not excactly your provided by the template…. but 95% exact)

    /* GeneratePress Site CSS */ @media (min-width: 1000px) {
    	body {
    		padding: 0px 0px 100px 100px;
    		margin-left: 100px;
    	}
    
    	.site-header {
    		position: fixed;
    		left: 0;
    		top: 0;
    		width: 200px;
    		z-index: 100;
    		height: 100%;
    		overflow: auto;
    		overflow-x: hidden;
    		-webkit-backface-visibility: hidden;
    		-webkit-overflow-scrolling: touch;
    		transition: .1s ease;
    	}
    	
     .admin-bar .site-header {
    		top: 32px;
    	}
    	
    .site-header .main-navigation li {
    		float: none;
    	}
    }
    
    .inside-header {
    	display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
    }
    
    .site-branding,
    .site-logo {
    	order: 1;
    }
    
    .header-widget {
    	order: 3;
    }
    
    .nav-float-right .inside-header .main-navigation {
    	order: 2;
    	float: none;
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    
    .nav-float-right .header-widget {
    	float: none;
    	top: auto;
    	max-width: 100%;
    }
    
    #menu-social-sider li {
    	display: inline-block;
    	margin: 0 10px;
    }
    
    .dropdown-click .site-header .main-navigation ul ul {
        position: relative;
    }
    
    a.button,
    a.button:visited,
    button,
    input[type="submit"] {
    	border-width: 1px;
    	border-style: solid;
    	border-color: inherit;
    }
    .mc4wp-form-fields input {
    	margin-bottom: 10px;
    	width: 100%;
    	text-align: center;
    }
    
    .single .entry-header::after,
    .page .entry-header::after{
        border-bottom: 1px solid #000;
        content: "";
        display: block;
        margin-bottom: 40px;
        padding-bottom: 40px;
        width: 2.5%;
    }
    
    .main-navigation.toggled .main-nav li {
    	text-align: center !important;
    }
    
    ::-webkit-input-placeholder { 	text-transform: uppercase;
    	font-size: 14px;
    }
    
    ::-moz-placeholder {
    	text-transform: uppercase;
    	font-size: 14px;
    }
    
    :-ms-input-placeholder {
    	text-transform: uppercase;
    	font-size: 14px;
    }
    
    :-moz-placeholder {
    	text-transform: uppercase;
    	font-size: 14px;
    }
    
    @media (max-width: 768px) {
    	.separate-containers .site-main {
    		margin-top: 20px;
    		margin-bottom: 0;
    	}
    	
    	.post {
    		margin-bottom: 20px;
    	}
    	
    	.inside-header {
    		padding: 30px;
    	}
    	
    	html:not(.mobile-menu-open) .header-widget {
    		display: none;
    	}
    	
    	.nav-float-right .inside-header .main-navigation {
    		margin-top: 0;
    	}
    	
    	.nav-float-right .inside-header .main-navigation:not(.toggled) {
    		margin-bottom: 0;
    	}
    } /* End GeneratePress Site CSS */
    #1408653
    CREATIVA GRAFICA
    #1409143
    David
    Staff
    Customer Support

    Hi there,

    i am not sure whether this will work.
    You can try adding your template in the inside_header_hook

    #1409276
    CREATIVA GRAFICA

    Hi David,
    thanks for your answer and help.
    I didn’t see that hook
    😅

    but i think, you put me on the right track.

    thank you very much

    #1409310
    David
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.