[Support request] How to Modify Navigation Block

[Blake]

In addition, the Inner Header Width is to remain contained as its important that the other items in the header format correctly.

[Tom]

Can you link me to the actual page? It’s too difficult to guess the CSS needed using screenshots.

Also, All of that sticky nav code shouldn’t be necessary as the Menu Plus add-on has a much more robust sticky navigation feature.

[Blake]

I have amassed quite a bit of information here. Posted earlier, http://www.modifieddna.net. This is the website from the screen shots.

[Tom]

I see what you’re going for, and it’s definitely complex. Using big margins etc.. probably isn’t the best method as you’ll run into all kinds of issues on mobile.

Wouldn’t something like this be a more efficient use of space?: https://www.screencast.com/t/qpGaLBxXrNep

It’s also 100% achievable in GP with no custom code whatsoever.

[Tom]

As for your question here: https://generatepress.com/forums/topic/how-to-modify-navigation-block/#post-318616

You could set the inner container to full width in Customize > Layout > Header.

[Blake]

Thank you for the illustration. What you have created is essentially a single row layout, where all elements are inline. That layout does work best for responsive design as the majority of the themes I have seen have a similar layout. Although it does not meet the requirements for the design I have described in great detail. For this project it requires placing multiple text, and images elements above the navigation menu items while in line with the logo. As you mentioned I had to use quite a bit of padding to orientate “Social Icons Here,” “Call Us Text here,” and navigation menu items in the right direction. Then I had planned to use media css, to re adjust the padding for Ipad and phone resolutions. I am not seeing how that part is overly complex, unless you mean its outside of the default options.

“You could set the inner container to full width in Customize > Layout > Header.”

I wanted to avoid this option as I specifically mentioned the need for the inner header to be contained / fluid-fixed. Changing it to full width would then put all the contained elements on the page out of alignment with the header area. There are many websites that use a combination of full width and fixed blocks. I suppose the problematic area is that the Nav resides in the Header. The Header’s contained css is not allowing the Nav menus full width.

What about a z-index adjustment to the navigation block? Could that property be used to fill the gap to the left of the navigation block while moving that element out of the contained header space? Any more ideas?

[Blake]

Looked through several others sites to compare and noticed a missing CSS element.

I added:

.nav-float-right #site-navigation {right:0;left:0;}

That fixed the issue. Now the Navigation Width is going Full.

[Tom]

Interesting, I’m glad you found a solution.

Instead of using all of that spacing, you could do this:

.callus {
    display: inline-block;
    margin: 10px 70px 10px;
}

.socialicons {
    display: inline-block;
}

[Author]

Posts