Add text & make logo larger in header

Hi there,

first off change the Customizer > General --> Structure to Flexbox.

Then you can:

1. Increase the Font size of the Customizer > Typography > Primary Navigation to increase menu and cart icon size.
2. Increase the Menu Item Height in Customizer > Layout > Primary Navigation - this will increase the overall nav height and the Logo will scale with it.

Thank you! That change moved the logo from being left justified to being on the right side. How can I get it back on the left? Also, how can I insert the text centered between the logo and the buy now button?

Now add this CSS:

#primary-menu {
    margin-left: auto;
}

@media(min-width: 600px) {
    #primary-menu {
        margin: auto;
    }
    .menu-bar-items {
        margin-left: 115px;
    }
}

It will center the button on larger screens and keep it aligned beside the cart icon on small devices.

That moved the logo back to the left, but then put the buy now button as centered, leaving the shopping cart icon on the right. I'd like the buy now button to stay on the right next to the shopping cart icon and insert text in the center about free shipping.

Aah sorry - i missed the bit about the shipping text... need more coffee.
First off remove the CSS i provided.

Lets add the text. Do the following:

1. Create a new Hook Element:

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

2. In the hook element text field add:

<p class="nav-text">Your free shipping text here</p>

3. Select the Hook: generate_after_logo

4. Set the Display Rules to the Entire Site.

Once thats done let me know and ill provide the CSS to align it all.

I've done this. I don't see the shipping text, but its entered.

Are the Display Rules in the Hook set to display on Entire Site?

Yes they are set to entire site. When I had first done it, I accidentally set the hook to "generate after header" and under that setting, I could see the text, but it was clearly not in the correct place. I changed the hook to "generate after logo" and the text is no longer visible. In both cases the hook was set to Entire Site.

generate_after_logo only exists in the header when navigation as a header is deactivated:
https://docs.generatepress.com/article/hooks-visual-guide/

Just to confirm, the desired result is logo on the left, free shipping text in the center, then rest of the items on the right?

Yes please

Hi Steig,

Is the Block Element still active? I've inspected the site and I don't see the HTML rendering.
https://share.getcloudapp.com/xQu7WJLE

Normally, even if it is not visible on the page, it should be rendering on the HTML source. We should see the block between the site-logo div and the button element.

In cases like this, it means that the block element isn't running.

Can you confirm if the block element has any contents, has proper display rule location and isn't placed ni "trash"?

Let us know.

I went into Customizer / general and changed structure to "flex box"
I then did the hook for the entire site with "generate_after_logo"
I do have a layout for entire site that disables the site header. Could that be causing a problem?

Can you try using generate_inside_navigation hook instead?

Then we can provide the CSS to relocate the elements.

Thanks!

That worked!