- This topic has 9 replies, 2 voices, and was last updated 6 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 13, 2020 at 6:09 am #1361846
Jack
Hi, I was looking at this page on centering the logo in the nav menu. This looks great, but I was wondering if it is possible to use my header widgets in the header still? Instead of the “Press, Contact and Search” items on the right in the example in that link, I would have a Custom PHP widget – alternatively is there a way to manually put in the HTML/PHP in a menu item and have it run?
Thanks!
Jack.July 13, 2020 at 6:39 am #1361865David
StaffCustomer SupportHi there,
theres a few ways to go about it.
If you’re using the header setup then yes the Header Widget can still be used. It would require some different CSS to make that work and we can help with that.
If using the Navigation as Header method you can use a Hook element to add your custom PHP element to the
inside_navigation
hookhttps://docs.generatepress.com/article/hooks-element-overview/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 13, 2020 at 7:09 am #1361893Jack
Hi, thanks for your reply. I just tried using the Navigation as Header method but couldn’t get the widget to appear on the right hand side of the navbar – perhaps I could try the Header Setup, if you could help with the CSS? Thanks!
July 13, 2020 at 7:26 am #1361911David
StaffCustomer SupportYeah – header widget is disabled when Navigation as Header is selected.
If you want to remove any CSS you have in relation to the centered logo.
Then:1. Add your code to the Header Widget.
2. Set you Primary Navigation to Float right.Once thats done ill take a look at the CSS.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 13, 2020 at 10:05 am #1362260Jack
Perfect, I’ve done that there – thanks!
July 13, 2020 at 10:10 am #1362264David
StaffCustomer SupportCan you remove the CSS you got from this doc and disable any cache plugins you may have.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 13, 2020 at 12:21 pm #1362372Jack
I’ve done that there now too
July 14, 2020 at 1:04 am #1362781David
StaffCustomer SupportMove your Custom content into a Header Widget.
Then add this CSS:@media(min-width: 769px) { .site-header { position: relative; } .inside-header { display: flex; flex-direction: row-reverse; align-items: center; } .site-logo { position: absolute; top: initial; left: 50%; transform: translateX(-50%); } .main-navigation { margin-right: auto; } .site-header .header-widget { width: auto; top: unset; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 14, 2020 at 5:28 am #1363013Jack
Perfect – that worked once I set the background color of inside-header to the same colour as the nav menu also. Thanks!
July 14, 2020 at 7:36 am #1363120David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.