- This topic has 17 replies, 3 voices, and was last updated 1 year, 1 month ago by
Tom.
-
AuthorPosts
-
December 13, 2019 at 6:18 am #1103155
Carsten
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
CarstenDecember 13, 2019 at 6:27 am #1103171Carsten
What I want to achieve is this, a slim line header, with back widget and nav in line both on desktop and mobile:
December 13, 2019 at 12:18 pm #1103636David
StaffCustomer SupportHi 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_navigation
hook
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/December 13, 2019 at 1:32 pm #1103682Carsten
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
CarstenDecember 13, 2019 at 2:06 pm #1103705David
StaffCustomer SupportWe 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/December 13, 2019 at 2:25 pm #1103716Carsten
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.
December 13, 2019 at 3:05 pm #1103735Carsten
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.
December 13, 2019 at 4:47 pm #1103760David
StaffCustomer SupportThe 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/December 14, 2019 at 2:31 pm #1104542Carsten
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
December 15, 2019 at 9:24 am #1105115Tom
Lead DeveloperLead DeveloperHi 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-developmentDecember 15, 2019 at 10:49 am #1105153Carsten
Credentials have been sent by mail
Password: buddydev
December 15, 2019 at 6:42 pm #1105333Tom
Lead DeveloperLead DeveloperI’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-developmentDecember 16, 2019 at 3:19 am #1105596Carsten
Hi 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’
December 16, 2019 at 9:57 am #1106076Tom
Lead DeveloperLead DeveloperWhat 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-developmentDecember 16, 2019 at 10:19 am #1106090Carsten
Thanks, that’s looks much better, what if I instead want the second widget centered?
-
AuthorPosts
- You must be logged in to reply to this topic.