[Resolved] Mobile logo and menu in 2 different lines

[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

[Leo]

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?

[Ivan]

Thank you

[Leo]

No problem 🙂

[Author]

Posts