- This topic has 17 replies, 3 voices, and was last updated 1 year, 1 month ago by
.
-
Posts
-
Hi there, why are the navigation and the widget not vertically aligned as you would expect, but the nav is instead below the widget?
Regards
CarstenWhat I want to achieve is this, a slim line header, with back widget and nav in line both on desktop and mobile:
Customer Support
Hi there,
the Header Widget sits within the Site Header container as does the primary navigation, hence the elements stack.
Instead of using the header widget, you can do the following:
1. Add New Hook Element
https://docs.generatepress.com/article/hooks-element-overview/2. Add you button to the content with a CSS Class eg.
<a href="#" class="navigation-button">Label</a>3. Select the
inside_navigationhook
4. set your Display Rules to entire site.5. Add this CSS:
.inside-navigation { display: flex; align-items: center; } .navigation-button { margin-right: auto; }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hi David, thank you.
Quite a process to achieve this, is this something you would concider to implement to GP?, I think many would ask for this slim compact header app like design for mobile.
Regards
CarstenWe do get quite a lot of requests for adding custom elements to the navigation. The hang up is the requests vary quite considerably and we have yet to find a solution that covers enough bases to warrant a new feature…. this is where the Hook Element really does shine.
But we are still looking 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Yes I understand, I can only imagine the amount of requests you are receiving every day. Header and navigation are really difficult to get right, but it must be possible to make some kind of grid for the header and top bar, to avoid something like this, which does not make sense.
Leo has answered that this must be a css conflict with the plugins, it might be, but you would expect the design to be more logic and better out of the box.
With these settings, and my poor css skills, I manage with flex to have the back button widget and the navigation almost in line in header.
What I need now is to have the nav menu to float right. This is not the right way of doing this, I know, when I scroll down the back button disappears and the nav is centered again.But just to demonstrate, that by build in a little more tools and options in the customization of the header would solve a lot of requests I think.
The header widget was never designed to sit in-line with the Navigation. Only in line with the Site Identity. The markup used to build the site header is not conducive for this type of layout and changing it to make it so would break backwards compatibility and potentially break a lot of sites.
Further to this we have to consider the direction that WP is taking and how the block editor will become more entwined with theme editing. So much so we had to pull our latest Elements module from the last update that would make this sort of thing simpler.
The simplest solution today is the steps i provided earlier.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Ok, I will use the top bar for my widgets instead.
If my Top Bar Alignment is set to Left, the two widgets are centered on mobile, please explain why this is happening?
How do I get the widgets aligned left, and even better, the Back Button widget aligned left, and the ‘New Messages’ widget centered? ThanksRegards
CarstenDesktop
mobilesettings
Lead Developer
Hi there,
Should only require a little bit of CSS – your site seems to be password protected, any way you can share the password with us?
Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentCredentials have been sent by mail
Password: buddydev
I’m only seeing the one widget in the Top Bar area right now.
To stop them from centering, try adding this CSS:
@media (max-width: 768px) { .top-bar.top-bar-align-left, .top-bar.top-bar-align-right { text-align: left; } }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHi Tom, thanks for the code, it aligned all the widgets to the left.
Optimally I want the two widgets, either to align left/center, or left/right.
To see the top bar with two widgets active, please ty to login again as ‘jette’, password ‘alfa’
What if you just add this?:
a.yhanm { float: right; }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks, that’s looks much better, what if I instead want the second widget centered?
- You must be logged in to reply to this topic.