[Resolved] Mobile logo and menu in 2 different lines

Home Forums Support [Resolved] Mobile logo and menu in 2 different lines

Home Forums Support Mobile logo and menu in 2 different lines

  • This topic has 3 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #560812
    Ivan

    Hello, On Mobile Version my Logo and my Menu are in two different Lines, I already search for a solution but it don’t work for me. Leo said i need to Open this new Topic.

    I try what Leo says to activate the Mobile Header and add a test square logo, but my Logo and my Navigation are still in two diffrent lines.

    Also when i use the Chrome feature to test my Site on diffrent Tablets/Phones my theme don’t switch everytime correctly in Respnsive mode.

    /* GeneratePress Site CSS */ @media (min-width: 1000px) {
    body:not(.op-plugin) {
        padding: 40 40px 40px;
        margin-left: 300px;
    }
    	
    body:not(.op-live-editor-page) {
        padding: 40 40px 40px;
        margin-left: 300px;
    }
    
    	.site-header {
    		position: fixed;
    		left: 0;
    		top: 0;
    		width: 300px;
    		z-index: 300;
    		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 */
    
    /* From here my own Custom CSS Starts, above is from the Sider theme wich i found in Libary */
    
    .site-header {
    		background-color: #222C3C;
    	}
    		
    .inside-header {
    	padding: 0px 0px 0px 0px;
    }
    
    .main-navigation:not(.slideout-navigation), 
    .main-navigation:not(.slideout-navigation) ul ul {
        background-color: #222C3C;
        width: 100%;
        text-align: left;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        box-shadow: inset 3px 0 0 0 #00a8ff;
    }
    
    .site-branding,
    .site-logo {
      width: 100%;
    	padding-top: 15px;
    	border-style: hidden;
      border-top-width: 5px;
      border-top-style: solid;
      border-top-color: #00a8ff;
    }
    
    .secondary-navigation {
        border-style: hidden;
        border-top-width: 5px;
        border-top-style: solid;
        border-top-color: #00a8ff;
    }
    
    @media (max-width: 768px) {
        .secondary-navigation {
            display: none;
        }
    }

    Thank you

    #561073
    Leo
    Staff
    Customer Support

    Hi there,

    The width: 100%; line in this CSS is causing the problem:

    .site-branding,
    .site-logo {
        width: 100%;
        padding-top: 15px;
        border-style: hidden;
        border-top-width: 5px;
        border-top-style: solid;
        border-top-color: #00a8ff;
    }

    Perhaps use media query so it’s desktop only if you need it?

    #561328
    Ivan

    Thank you

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