- This topic has 19 replies, 3 voices, and was last updated 5 years, 4 months ago by Leo.
-
AuthorPosts
-
December 28, 2018 at 9:38 am #767860Karsten
Hi Friends,
Could you please help me with some CSS: I would like to bring als features in my header in one horizontal line.
At the moment the Menu items are not in the middle of the header.
Thank you
December 28, 2018 at 3:10 pm #768111LeoStaffCustomer SupportHi there,
Can you try setting the navigation location to float right first?
December 28, 2018 at 3:14 pm #768114KarstenI have done it now.
December 28, 2018 at 8:36 pm #768206LeoStaffCustomer SupportGive this CSS a shot:
.inside-header { display: flex; justify-content: space-between; } .inside-header .site-logo { order: 1; margin-right: auto; } .inside-header .header-widget { order: 3; margin-left: auto; } .inside-header .main-navigation { order: 2; margin-left: auto; }
December 29, 2018 at 4:54 am #768374KarstenThank you, Leo, this code is very helpful.
I would also like to have the logo close to the first navigation element. Do you have some CSS for me which will position the logo closer to the first navigation element?
When I scroll down the website the Navigation menu moves completely to the right side which is not what I want.
Basically I would like this navigation design.
Thank you for your great support.
December 29, 2018 at 3:47 pm #768798LeoStaffCustomer SupportSo basically you want the sticky navigation to be exact same as the static mode?
If so we will have to go with another method:
https://docs.generatepress.com/article/navigation-as-a-header/December 30, 2018 at 5:59 am #769034KarstenThank you for this link which is helpful.
In order to get rid of the header on all pages and pages I used this CSS:
site-header { display: none; }
Is that correct?
December 30, 2018 at 7:43 am #769202DavidStaffCustomer SupportHi there,
better to use the Layout Element then you can disable the Site Header on the Entire Site:
https://docs.generatepress.com/article/layout-element-overview/
December 30, 2018 at 8:02 am #769210KarstenThank you, David
I have done it like suggested.
One more issue:
The Logo is now located to close on the left edge. How could I move the Logo closer to the first main menu element?
December 30, 2018 at 8:15 am #769222DavidStaffCustomer SupportSomething like this – adjust pixels accordingly:
@media (min-width: 769px) { .main-navigation .inside-navigation:not(.grid-container) .navigation-logo { margin-left: 20px; } }
December 30, 2018 at 9:41 am #769290KarstenThank you, David,
But this code does not do the job. Please check.
Also the header is still there as you can see here. I have deactivated the header in elements.
December 30, 2018 at 10:05 am #769302LeoStaffCustomer SupportSo for the header, you used Layout Element to disable the header and set it to Entire site?
That should absolutely work.
Any caching plugins?
December 30, 2018 at 10:13 am #769307Karstensorry, that was my mistake.
I forgot to set it to entire site. Thank you for your help. Now it works.
Now I still have the issue that I would like to position the logo closer to the main nav.
The Code that David gave me does not do the job.
Please help.
Thanks
December 30, 2018 at 11:32 am #769354LeoStaffCustomer SupportLooks like David’s CSS is indeed working:
https://www.screencast.com/t/WOANHAXaEMaybe try increasing the px number more?
December 30, 2018 at 11:57 am #769374KarstenYes, it works, but not completely.
For demonstation purpose I have increased from 20px to 400px and this brings the logo closer to the navigation elements, but also the navigation is moved to right side which does not lock good. Please check here.
I would like to have the navigation centered and the logo close to navigation.
-
AuthorPosts
- You must be logged in to reply to this topic.