[Support request] Centered content in top bar

[Lea]

HI Tom,

Thanks for making such a great theme. This is my first time using your theme, and I love it.
I found this thread on adding custom text etc into the top bar above the header. I have successfully added the code you suggested to have content on the left and right side of the top bar, but I was hoping you can help me edit the code to have only one peice of text in the center of the top bar such as a phone number.

I also want to know If I can make the top bar part of the header and make the whole header sticky? When I do select sticky in the customise area, the menu is there but the logo doesnt show when you scroll.

Just letting you know this website is a work in progress, its not finished yet, which is why it looks a bit random.

Thanks very much for your help.
Lea

[David]

Hi there,

ok, so different way of going about this:

1. Disable the hook you have used to add the 2 column content.

2. Set your navigation as the header:
https://docs.generatepress.com/article/navigation-as-a-header/
Make sure the nav logo is set to the both static and sticky.
Adjust the Menu Item height as this also sets the height of your logo.

3. Enable the Sticky Navigation in the customizer.

4. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
Add this HTML:

<div class="inside-nav-top-bar">
    Go Pest Hotline: 5448 3407 Mobile: 0419 427 092
</div>

Select the inside_navigation hook
And set your display rules to Entire Site.

Once you done all that let me know and ill provide some CSS to make it all look fine.

[Lea]

HI David,

Thank you so much for your reply. I think I have the top bar and menu sorted out. Except for the logo, do I just use left and top margin to move the logo into the blue section on the header? Also I couldnt seem to make the logo any larger?

I have anothe question as well, with the sidebar, how do I add the sidebar to the right side and start it below the hero image? I have it currently in a grid box, but this doesnt work as well on the mobile design. Or should I attach the hero image to the header? would this make the sidebard sit underneath the image?

Thanks again for your help.
Lea

[David]

So this CSS to now align everything in your nav correctly:

@media (min-width: 768px) {
    .inside-navigation {
        display: flex;
        flex-wrap: wrap;
    }
    .main-navigation .navigation-logo {
        margin-right: auto;
    }
    .inside-nav-top-bar {
        order: -1;
        flex: 1 0 100%;
    }
}

The logo in the nav is defined by the height of the menu items, increase them in the Customizer > Layout > Primary Navigation > Menu Item Height.

As you are not using the site header you can remove this using the Layout Element. It will reduce the blue space below the nav.

Yes, if you use the Header Element to display the featured image then the it will space across the page content.

[Lea]

Hi David,

Thanks so much, works beautifully.

Im not sure I understand how to merge the slider with the header, so the sidebar will sit below it??

I am using Elementor for the home page and to generate the slider, is there something else I need to do?
and is this where I merge the site header with the page header?

Thanks again, really appreciate your help.
Lea

[David]

So you can save the Slider Section in Elementor as a template. Then go to Dashboard > Templates and get is shortcode. Add its shortcode as the Content of a Header Element:

https://docs.generatepress.com/article/header-element-overview/

Set the Container and Inner Container to Full Width. You can then set the Display rules for which pages you want it to display on ( or the entire site )
You can then remove the Slider from the page itself.

[Lea]

Thank David,

I dont seem to be able to get the sidebar to work properly and besides the widgets dont allow me to add an accordian contact form as I currently have on the home page.

But can you please tell me with the header how I get the slider images to start below theh blue nav bar and not sit underneath it? It cuts the tops off the images?? I have merged the slider to the header in the elements area.

thanks very much for the amazing support.
lea

[David]

Disabling the Merge with Site Header should place the header element below your navigation. let me know.

[Lea]

HI David,
Thanks for your help again. Im still not sure the image is sitting below the nav bar, but it seems to be ok.

Would you be able to tell me how to change the line height in the footer widgets? I have a copy of the nav menu in widget 1 and the line height is way too big. I have tried a number of things that dont work, so perhaps it needs some custom CSS?

Thanks again for the excellent help. I will be promoting generate press to others.

Lea

[David]

looks like you resolved that issue with the menu item height? Let me know.

[Lea]

Hi David,

Thanks for the help. I have more issue, when you look at the page on an ipad turned to landscape, the top bar showing the phone numbers has rolled to four lines and because it is sticky, it gets in the way of the rest of the page.

I tried to change the @media query to go to the mobile header at 1024 px, but this didnt work. How can I change the css to load the mobile header and take the desktop header out from 1024 px?

Thanks very much.
Lea

[David]

Can you confirm the Site URL? Its currently going nowhere for me.

[Lea]

sorry. the url is: http://www.gopestbendigo.com.au – you might have to wait for it to load.

I am having terrible trouble with the initial loading speed as well, as you have just experienced. It seems to be waiting for a very long time before it loads. I have tried optimisation plugins, cdn’s, image resizer, javascript parsing, adding to the .htaccess file. Just cant get it to speed up.

Thanks
Lea

[David]

It looks like the nav is playing up where it is too long to contain the logo on smaller screens.
Instead of using the Navigation logo. How about you set the Navigation location to float right in Customizer > Layout > Primary Navigation. You can then adjust the drop off point to where it hits the logo and it will move below the logo.

This would not need the CSS so you can remove that temporarily to see if we can find a better solution.

Let me know.

[K]

@Lea

If you’re still having slow load issues, it may be related to too many entries in your wp-options table. Mine had some 300k bad entries and deleting them shaved 2 seconds off our load time.

[Author]

Posts