Archived topic
Centered navigation with logo on the left
1 reply · Started by Filip on April 9, 2020
Hi there!
First off: I love the theme - it's a brilliant product.
However, I'm having trouble setting up a fairly easy (if I were to code it from scratch) header design that would contain a logo on the left, centered navigation and some additional content on the right (a text widget).
Screenshot: https://d.pr/i/gQphSj
The question is: do I have to completely wipe the default GeneratePress and code this from scratch (which I wouldn't like to do because I'd strip my client from native theme functionality and Customizer) or are there some steps to create a "base" for such design and add some of the additional content with hooks + extra CSS styling?
Thanks!
Hi there,
Glad to hear that :)
theres a few ways to do this - the simplest method requires this setup:
Normal Site header with logo ie.NOT navigation as header.
Primary Navigation Location set to Float Right
Widgets added to the Header Widget
and some CSS:
.inside-header {
display: flex;
align-items: center;
}
.header-widget {
top: unset;
order: 10;
}
.main-navigation {
margin-left: auto;
margin-right: auto;
}Depending on the design / logo widths / nav length etc. it will require a little CSS to tune that layout.
Alternative options when using the Navigation as Header or the Mobile Header is GP Hooks to insert other content. Two hooks are: inside_navigation and inside_mobile_header. Will require some Flex CSS for re-ordering.
