- This topic has 14 replies, 2 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
March 4, 2020 at 2:56 pm #1185262
Anthony
I’m having trouble getting the header widget to align to the right on mobile.
I’m trying to get it to look exactly like it does on desktop, on the mobile.
Thank you!!
March 4, 2020 at 3:51 pm #1185284Anthony
Sorry.
Now I’m having trouble getting the Site Branding to align center.
In the Layout settings, I have the Header set to be centered yet it keeps going right.
I’m basically trying to have
MENU – Site Branding – Header WidgetBut the homepage needs to be merged with the Header, and the rest of the pages do not.
March 4, 2020 at 5:31 pm #1185345David
StaffCustomer SupportHi there,
try this CSS:
.site-header .inside-header { display: flex; flex-direction: row !important; align-items: center; position: relative; } .main-navigation { order: -1; margin-right: auto; } .site-branding { position: absolute; top: 0; left: 50%; transform: translate3d(-50%, -25%, 0); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 4, 2020 at 6:49 pm #1185378Anthony
Works great. I still can’t figure out my mobile menu.
On Desktop I have my Parent menu item as “MENU” which drops to three other Sub Menu items.
On Mobile it gives you the Hamburger Icon, then drops down to MENU and then MENU doesn’t drop-down to anything for some reason.
Thanks!
March 5, 2020 at 2:33 am #1185568David
StaffCustomer SupportCould try keeping the Desktop nav on Mobile.
In Customizer > Layout > Primary Navigation you could:
1. Set the Mobile Menu Breakpoint to
0
2. Change the Navigation Dropdown to Click Menu ItemDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 6:08 am #1185761Anthony
That’s a bit better.
But for some reason, I can’t get it to stop Stacking once it hits 500px of width (mobile).
The Site Branding, Site Navigation, and Header Widget seem to Stack once it hits 500px
Instead of being Inline.
March 5, 2020 at 7:55 am #1186059David
StaffCustomer SupportI edited the CSS here this should make sure the inside-header maintains a flex row.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 8:16 am #1186085Anthony
Hmm,
Maybe I’ll just abandon this. I can’t seem to get it to work.
For me, with the newly provided CSS, the Menu is still below the Site Branding. And on Desktop my Header Widget Accordion when opened is dragging down the Site-Navigation with it.
Maybe I’ll try and build out a CSS drop-down instead of the Accordion inside the header widget?
I’m basically trying to have
Menu – Site Branding – Header Widget
On both the Desktop and Mobile
Where the Header Widget (at first was an accordion widget) drops down to a contact form on Desktop but on Mobile opens a full Screen Modal with the Contact form (which I plan to just build out with CSS/JS.
Maybe I’m going about it all wrong?
March 5, 2020 at 8:49 am #1186111David
StaffCustomer SupportI would suggest there are better ways of doing it…. but maybe some sacrafices need to be made.
For example you could use the Off Canvas Panel for your Mobile and Desktop menu – this can be displayed with the Hamburger Icon and ‘Menu’ label if needed.
Question what is the end game for the Header Widget ? As we could hook something in here. Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 9:02 am #1186120Anthony
My client really wants the drop-down menu on mobile. He doesn’t like the off-canvas for whatever reason.
I’m only using the Header-Widget because I’m able to insert a Site-Origin Accordion Widget there (which enables me to have the Drop-Down contact form on Desktop). Which you can see in place currently.
I had a CSS/JS drop-down I created from a W3Schools Tutorial except when you clicked inside the form to fill it out the drop-down kept closing, which is why I decided to use an accordion widget there.
March 5, 2020 at 9:13 am #1186135David
StaffCustomer SupportYeah – that Accordion is going to cause some pain. May be better if you look at a Pop Up / Modal plugin for the form. Then its just a simple link that needs to be added in its place.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 9:34 am #1186155Anthony
I didn’t think to use a Modal on Desktop too. Maybe just have it pop up right below as if it’s a drop-down perhaps…are you thinking using a Hook instead of the Widget here?
Now I have an element in the after_header_content. I have a div in there that’s set to float: right.
But I still can’t get the Site Nav to be inline on mobile.
See attached. It has a margin: 0 auto; attached to it.
March 5, 2020 at 12:19 pm #1186321David
StaffCustomer SupportTry this CSS to remove the left hand auto margin:
#site-navigation { margin-left: unset !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 3:54 pm #1186444Anthony
Seem to have done the trick! Thanks!
March 6, 2020 at 5:21 am #1186856David
StaffCustomer SupportYou’re welcome
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.