-
Hi awesome GeneratePress people
I would like Primary nav (on the left) and a Call to Action link (on the right), I presume in a widget to be horizontally inline above the Site Title. At mobile breakpoint, the Primary nav to go mobile view (hamburger), and the CTA to remain the same.
I wish to have the Primary nav and the CTA link snuggled up against the top of the screen, with the Site Title underneath.
And all of these to be Sticky.
I’ve looked a lot and tried all sorts of things but no luck so far. Thanks for your help.
-
Hi there,
Remove the Call to Action button from the widget area.
And instead:1. in Appearance > Elements -> Add New –> Block
https://docs.generatepress.com/article/block-element-hook/2. in the element setting sidebar set the Hook to
menu_bar_items
3. set the Display Rules to theEntire Site
4. in the editor add your CTA buttonMake those changes and then let me know. And we can look at the next steps.
-
Thank you very much David. I did that easily with your instructions. (I sure appreciate you and all … I’ve been using GP and GB for many years, though on very simple sites, and the product and service never ceases to delight me.)
In the process of the above, I’ve changed my mind. I’d like to put the Members access links (currently done as the Secondary nav – one of which is a Login/Logout toggle btw) – put this above the CTA link (each of these elements on the right of the screen).
I tried many things but couldn’t get the Members nav to be at the top (inline with the Primary nav), and the CTA link below it.
Thanks for your help when you can.
-
Hmmm… i may have to do some trial and error attempts.
Begin with the Customizer > Layout > Secondary > Navigation and set its Location to Float Right as well.
This will put it inside the header with the other content.
Once its there let me know and i can look at what else is required -
No worries! It seems what I am trying to do is a little peculiar. I will get back to you when I have a bit more of a play with it to ensure that’s what I actually want; and also get the other elements of the website finished to see how it all looks.
Thanks heaps for the direction – it helped me along.
Did you want to close this thread for now, or wait? I’ll be a few days. -
You can leave this topic open for as long as you require.
Let us know when you need further assistance! -
Hi David
I’m finally back and would love your help with horizontal alignment of header items, as per my previous enquiry here.
I have a sketch of what I am after – can I send that to you? -
Hi there,
to share the image, you can save it to a cloud drive, or even your WP Media Library and just send us the URL to where the image is. You can share it in the private information field below.
-
Thank you for all those options – I’ve shared Media Library link.
-
This is the header area – which I’d like this layout on every page and every device size, and sticky on all (as is already – due to one of your other forum answers, thank you!) … except Primary Menu collapses to Hamburger on small media (which I have working properly, I think).
I just can’t get everything lined up to securely/properly be in these positions: -
The basic layout could be achieved with this CSS:
#masthead .inside-header { display: grid; grid-template-areas: "a b" "c d"; } .main-navigation { grid-area: a; } .secondary-navigation { grid-area: b; } .site-branding { grid-area: c; } .header-cta-link-cont { grid-area: d; }The first rule builds a 2 x 2 CSS grid, with each cell labeled A to D
And then its just a case of assigning each of the 4 elements a specific area.Just a case of styling each grid item now.
-
Thank you VERY much David – this is brilliant, and gave me what I wanted to achieve.
All the best. -
Glad to be of help
- You must be logged in to reply to this topic.