Archived topic
Logo shifts to center in tablet and mobile mode and does not vertically align
5 replies · Started by Jo on November 20, 2018
Hi there!
This is my question of the week: :-)
If a logo which is appropriately placed on the top left side of my website (and perfectly vertically aligned) if I view it on my laptop or screen monitor is moving to the middle of the screen an also moving vertically upwards in tablet view and still slightly left centered and vertically too high in mobile mode cannot be moved with the WP customizer left padding settings which only seem to affect the position in laptop/monitor view, how can I tie that logo to the left in all views then? I am supposing it is also additional css, but I don´t know which class or where exactly to tweak.
Would you happen to know?
P.S. This website is based on your Site Library ZEAL Template
Best from good old, but increasingly more confused new Germany 🙂
Jo
Hi there,
in the Customizer > Additional CSS - find and remove this (you may want to just comment it our or paste it for safe keeping):
/* Mobile Navigation Breakpoint */
@media (max-width: 922px) {
.site-logo {
width: 140px;
margin: 0 auto 32px auto!important;
display: block;
}
#menu-main-navigation li {
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.main-navigation .main-nav ul li a {
line-height: 50px;
}
.main-navigation .menu-toggle {
display: block;
}
.main-navigation ul {
display: none;
}
.main-navigation.toggled .main-nav > ul {
display: block;
}
.main-navigation .main-nav ul ul.toggled-on,
.secondary-navigation .main-nav ul ul.toggled-on {
position: relative;
top: 0;
left: auto !important;
right: auto !important;
width: 100%;
pointer-events: auto;
height: auto;
opacity: 1;
display: block;
}
.main-navigation .main-nav li {
float: none;
clear: both;
display: block !important;
text-align: left !important;
}
.main-navigation .main-nav li.hide-on-mobile {
display: none !important;
}
.main-navigation .dropdown-menu-toggle:before {
content: "\f107" !important;
}
.main-navigation .sfHover > a .dropdown-menu-toggle:before {
content: "\f106" !important;
}
.main-navigation .menu-item-has-children .dropdown-menu-toggle {
float: right;
}
.main-navigation .mobile-bar-items {
display: block;
}
.main-navigation .menu li.search-item {
display: none !important;
}
.main-navigation .sf-menu > li.menu-item-float-right {
float: none !important;
display: inline-block !important;
}
[class*="nav-float-"] .site-header .inside-header > * {
float: none;
clear: both;
}
.gen-sidebar-nav {
display: none;
}
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
}
}Hi David,
this worked great except for one little glitch: Now the logo for the mobile view became very small, I kind of fixed it by giving it a fixed width for all devices:
.site-logo {
width: 160px; (instead of "width: 15%;", which worked well before)
height: auto;
}
But now it is kind of too small for monitor and too big for mobile view.
Would you know how to fix this?
Kind regards from Berlin,
Jo
Something like this - just adjust accordingly:
.site-logo {
width: 160px; /* Desktop size */
height: auto;
}
@media (max-width: 768px) {
.site-logo {
width: 160px; /* Mobile size */
}
}Great!
Thank you David!!!
I used
.site-logo {
width: 16%; /* Desktop
size */
height: auto;
}
@media (max-width: 768px) {
.site-logo {
width: 45%; /*
Mobile size */
}
}
and it worked out swell!
Thanks a lot!!!
Awesome. Glad i could help
