Archived topic
Header + Menu Advice
11 replies · Started by Dave on November 15, 2018
Hoping to replicate the mock-up I linked to this post in the header area and wondering the best way to go about it. Seems like a few ways to slice and dice, not sure what the best approach is and don't know all the details. Help? :)
1) Where the site name, logo and header widget are placed by default, I'd like like a single widget that matches the content+sidebar width. This would generally display a 728x90 ad unit, but should also be able to expand as needed to contain a 970x90 or 970x250 ad. Would I hack up the existing stuff or remove it and use Top Bar widget? And what might those details be? :) Sorry, thank you.
2) For the menu itself, prior to the first textual menu item but aligned/positioned where the first item is, is it possible to place a small, clickable logo/image?
3) Related, possible to float some linked social media icons on the right side of the menu bar?
Thank you!
Hi there,
1. What else is going in the header? Just the advert?
As you could achieve this with the header widget and maybe some CSS to align.
2. Customizer > Layout > Primary Navigation > Navigation Logo.
3. This article explains adding icons and floating them to the right
https://docs.generatepress.com/article/adding-icons-to-menu-items/
Will research 2 and 3, thank you! For header, yes - all I want there is the ad unit, nothing else. On my test site, I'm suppressing site name, tagline, and image but when I put a 768x90 ad unit into the header widget, it's partially cut off and align's right. Wondering how to expand that or do it differently. Thanks!
If you are effectively removing all of the site header. Then use the Hooks Element:
https://docs.generatepress.com/article/hooks-element-overview/
You can select the header hook and then disable the site header. The ad will then replace it entirely.
I disabled the header element like this:
Elements > Add New > Layout
Click Disable Elements tab
Checked Header
Display Rules Tab
Location Entire Site
Is that what you had intended? It nuked the whole header area, including header widget. Which is OK. I moved my ad unit into a Top Bar widget and that'll work. However, the unit aligns right. How do I shift it to align with the left side menu/content? Thanks!
This is what i meant:
Elements > And New > Hook
Add your advert code in the editor
Hook: header
Disable Site Header: Check - note this only appears when you select the header hook.
Set display rules
Nice, loving all the clever methods to modify. When I go this route, I lose the padding that I did appreciate. Is there a way to put some of that back or is a better approach to kill the entire header as I did by accident and left or center align the Top Bar widget? Also wonder if widget is a better approach when thinking about theme updates? I'm new here. :) Thanks for all your help with this!
Using the hook, you can add your script inside some HTML so it retains the padding e.g
<div class="grid-container">
the script in here
</div>Alternative you can use the Layout Element to disable the header and then use the top bar. If thats the preferred route set it up and i can look at some CSS for getting the ad displaying correctly.
Ha, now I'm totally rethinking my approach. :) Any info on the size of the header widget - is it like 50% the width? Can I adjust the size in some way? Pixels would preferable, but I can work with percent. Thanks!
Yeah the header widget is set to 50% max-width. So use this CSS as you need:
.header-widget {
max-width: 100%;
}Perfecto, thanks for all your help on this section!
You're welcome.
