Add text to the left on my navigation

Hi there,

Can you try adding the text using the generate_inside_navigation hook and let us take look?

Might just need a little bit of CSS.

Let me know :)

http://rocking.t114.langerenterprises.com/

You see how it places the text on top of the navigation, not to the left. (Test 1234)

Thanks

Can you try switching the theme structure from Float to Flex under Customizer > General first?

Let me know :)

That seemed to work, is there an easier way to justify the text to the left?

Hi there,

it doesn't look like you're using a Logo.
IF so, go to the Customizer > Site Identity and set your Site Title to display.
Then in Customizer > Layout > Header - check the Navigation as Header option.

Then you don't need to hook in the text.

I tried that but it eliminates the header section. I actually need a separate header to post items from time to time.

What will you be adding to the Header Section ?
As you can use a Block Element ( or Hook Element ) to add content to the before_header hook to display there.

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

Let me know.

I got that set up but I need to have the background red and the height to be smaller when not putting text into it.

You can give this CSS a try to add background color to the title:

.inside-navigation .navigation-branding {
    background-color: #923674;/*replace with your color*/
    padding: 0 20px;
    margin-left: 0 !important;
}

You should be able to adjust the height of primary navigation at customizer > layout > primary navigation > menu item height.

Let me know :)

After I completed all of the changes that Dave had me do, the CSS you gave me changes the wrong section. (See Image) I need to change the background and height of the Hook Element to add content to the "before_header" section.

http://rocking.t114.langerenterprises.com/wp-content/uploads/2021/08/Untitled-1.gif

What kind of information you wanting to add above the navigation ? As you can use the Themes Top Bar by adding a Widget to the Customizer > Widgets > Top Bar.

This will only display if you add a widget, it won't occupy any space if left empty.
You can then add color to the Customizer > Colors > Top Bar.

OK, one last thing. I have added a widget to the top bar and placed a simple image (1 px high) to the section. I would like to shrink the height of the Top Bar in half. How can I take some of the padding out from this section? I have already removed all of the padding from the Customizing ▸ Layout ▸ Top Bar part of the customizer section. I am using the Custom HTML Widget to add the image to the section. Thanks

It's not padding, but the line-height and font-size inherited from bodyelement.

Try this CSS if the content you inserted is just images:

.top-bar * {
    font-size: 0;
}