Archived topic
Centered logo but the menu items are not evenly displayed
6 replies · Started by Gabriel on February 14, 2021
Hello,
I was able to center the logo using your tips, but now the menu items are not evenly displayed between left and right. I've included the URL privately since I don't want search engines crawling the staging site. The issue is also causing the 'services' dropdown not to work.
I'm also trying to eliminate the huge space, where the title should be, above the hero image. The title is already disabled using the disabled elements add-on but space is still there. I know I can use CSS margin in a class to fix this one, but I'd prefer an easier method since I want the site to be compatible on all browsers and mobile.
I'm trying to avoid using a page builder plugin for this site since that can slow things down as far as page speed is concerned. I'm using Gutenberg.
Thanks for your help.
I was able to fix the title space problem by changing the content container to full-width on the page editor. I still have an issue with the Navigation though.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Yes, that is no problem. I have created temp credentials and included login details privately.
Hi Gabriel,
You could change this CSS from documentation a bit to achieve this effect:
https://www.screencast.com/t/nJGvmfd52
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}to:
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}Let us know how it works :)
That did the trick. Thanks.
You are welcome!
