Archived topic
How can I reduce logo width in Mobile Header?
13 replies · Started by Sibi Paul on April 20, 2021
What actually I want?
Check my site... from a desktop ( there I don't need any change )
Then,
Check my site from Phone...
the logo shows at left,
I need the logo in the center, search at the right, menu button ( three lines ) on the left side...
Menu - logo - Search
This order...
is there any way to do that?
without tweak the " Mobile Header " option under layout...
I couldn't see...
So, I went to Layout - Mobile Header
then added a Mobile Logo... But my logo is a little bit big, so... it shows bigger in Mobile...
Also the search button in left, logo at top, and menu at the right...
I don't need this order...
There is NO Option to reduce Mobile header logo width as seen on " Site Identity " > " logo width "
in this situation, What to do...?
Simply I need, my site's Desktop like the small logo on the Phone...
but, the logo should be in the center...
MENU - LOGO - SEARCH
kindly help me to get this done...
Thanks...
NB: meanwhile, check my AMP page to Know, what exactly I'm looking for...
Can you link us to the site in question?
Added...
Try this CSS:
.mobile-header .mobile-header-logo a, .mobile-header .mobile-header-logo a img {
height: 40px;
}
.inside-navigation.grid-container {
display: flex;
justify-content: space-between;
}
.mobile-header .inside-navigation.grid-container .menu-toggle {
order: -1;
}
.mobile-header .inside-navigation.grid-container.grid-parent > * {
margin: unset;
}Let me know :)
I Couldn't see any Difference... even after clear cache...
Kindly look at my current setup...
Look from a Phone...
Now
Logo > Search > Menu
I want in this order...
Menu > Logo ( Center ) > Search
in Mobile Only...
I don't see the code has been added to your site.
Please double check.
Make sure you are still using mobile header, since my CSS is based on this setting.
I added...
Then removed due to no effect...
kindly help me with this...
https://generatepress.com/forums/topic/how-can-i-reduce-logo-width-in-mobile-header/#post-1742374
Hi there,
Are you aiming for something like this?
https://share.getcloudapp.com/Z4uor0gq
If so, can you try this CSS?
@media(max-width:768px){
nav#mobile-menu-control-wrapper {
margin-left: unset;
width: 100%;
justify-content: space-between;
flex-direction: row-reverse;
}
button.menu-toggle {
flex: 0;
}
.site-logo {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.inside-header.grid-container {
position: relative;
}
}Here's how to add CSS - https://docs.generatepress.com/article/adding-css/
That code worked...
BUT...
There are some issues...
Visit from a Phone and Click on Menu Button and Search button...
You can see the logo align differently...
How to fix it...
Try to replace this CSS:
.site-logo {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}with this:
.site-logo {
position: absolute;
transform: translate(-50%, -50%);
top: 27px;
left: 50%;
}When this code is added...
Logo disappears from Mobile...
So I removed this code now...
@media(max-width:768px){
nav#mobile-menu-control-wrapper {
margin-left: unset;
width: 100%;
justify-content: space-between;
flex-direction: row-reverse;
}
button.menu-toggle {
flex: 0;
}
.site-logo {
position: absolute;
transform: translate(-50%, -50%);
top: 27px;
left: 50%;
}
.inside-header.grid-container {
position: relative;
}
}Here is my current custom css
.entry-content a {
border-bottom: 3px solid #b4a996;
padding-bottom: 2px;
}
#breadcrumbs {
font-size: 14px;
padding-bottom: 15px;
}
p#breadcrumbs {
margin-bottom: 0;
padding-bottom: 5px;
}
span.breadcrumb_last {
display: none;
}I've modified the CSS a bit to add z-index to the image.
try this.
@media(max-width:768px){
.inside-header{
position: relative;
}
nav#mobile-menu-control-wrapper {
margin-left: unset;
width: 100%;
justify-content: space-between;
flex-direction: row-reverse;
}
button.menu-toggle {
flex: 0;
}
.site-logo {
position: absolute;
transform: translate(-50%, -50%);
top: 30px;
left: 50%;
z-index: 999;
}
.inside-header.grid-container {
position: relative;
}
}