How can I center my logo in the navigation bar on mobile?

Store Design
1

Hello!

Can someone help me? I need to center my logo/name to the navigation bar on mobile and logo on left like it it now.

url : www.mousepadgo.com

desktop.PNG
desktop.PNG1237×576 46 KB

mobile.PNG
mobile.PNG472×622 26.1 KB

2

someone can help me?

3

Hello @Alberto95

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->timber.scss.liquid

.site-header .logo__image-wrapper {
	margin: 0 auto;
}

Hope this will work for you

Thanks…

4

Hey @oscprofessional ! Thanks you but probably i explained it bad, i would the logo on the center of the navigation bar.

On the yellow part

spiega.PNG
spiega.PNG337×266 8.23 KB

5

Hello @Alberto95

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->timber.scss.liquid

@media screen and (max-width: 768px) {
.site-header {
	position: relative;
	top: -12px;
	padding: 0;
}
.header-bar {
	position: absolute;
	width: 100%;
	display: block;
}
.site-header .grid--full {
	border-bottom: none;
	padding-bottom: 0;
}
}

Changes are looks like attached screenshot please refer.

logo.jpg
logo.jpg1053×134 11.9 KB

Hope this will work for you

Thanks…

6

Hello @Alberto95

For resolving menu clicking issue

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->timber.scss.liquid

@media screen and (max-width: 768px) {
.site-header .grid--full {
	border-bottom: none;
	padding-bottom: 0;
}
.site-header {
	position: relative;
	top: -12px;
	padding: 0;
	margin: 0 auto;
	width: 40%;
}
.header-bar nav {
	z-index: 1;
	position: relative;
	background-color: #484948;
}
}
@media screen and (max-width: 640px) {
.site-header {
	width: 50%;
}
}
@media screen and (max-width: 480px) {
.site-header {
	top: -8px;
	width: 60%;
}
}

Hope this will work for you

Thanks…