-
Justin35
Trying to figure out how to move the logo created in elements down on mobile menu breakdown to sit horizontally aligned in the middle between the search icon and the hamburger menu
-
Fernando
Hi Justin,
Try adding this through Appearance > Customize > Additional CSS:
.gb-container.gb-container-403f6869 { position:absolute; left: 50%; transform:translateX(-50%); } nav#site-navigation { min-height: 80px; display:flex; align-items: center; } nav#site-navigation .inside-navigation{ justify-content:space-between; width:100%; }
-
Justin35
It dropped it on desktop view as well and the bottom tip of the logo was cut off
-
Hi there,
is there any reason for using the Element to display the logo ?
As it would be easier to set it in the theme and position it.Let me know
-
Justin35
When I tried in the past using the themes it would really screw up my top menu and search bar positions but maybe you could help me make it work
-
Fernando
Alright. Can you remove the code I provided and setup the logo through Appearance > Customize > Site Identity?
-
Justin35
ok it’s done
-
Fernando
Great. Now, set the Navigation Location in Appearance > Customize > Layout > Primary Navigation to “Below Header”. Reference: https://docs.generatepress.com/article/primary-navigation-layout-overview/
-
Justin35
Ok it’s set
-
Fernando
Now, remove your Block Element for the logo, and add this through Appearance > Customize > Additional CSS:
.inside-header { justify-content: center; } @media (max-width: 768px){ .inside-header { position:absolute; left: 50%; transform:translateX(-50%); } nav#site-navigation .inside-navigation.grid-container { align-items:center; height: 100%; min-height: 80px; } }
-
Justin35
Just a few more things still not working right
-
Justin35
The line is supposed to be below the menu
-
Fernando
Let’s address the line first. Remove this custom code you have:
.site-header { border-bottom: 1px solid #dddddd; }
Replace it with this:
nav#site-navigation { border-bottom: 1px solid #dddddd; }
-
Justin35
Logo on smaller screens is dropping below the line a little.
https://ibb.co/NTrqNxL -
Fernando
Change
80px
in the code I provided here to a higher value like100px
. -
Justin35
Beautiful Thank you!
- You must be logged in to reply to this topic.