Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Support request] How to Modify Navigation Block

Home Forums Support [Support request] How to Modify Navigation Block

Home Forums Support How to Modify Navigation Block

Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #318625
    Blake

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

    #318700
    Tom
    Lead Developer
    Lead Developer

    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.

    #318703
    Blake

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

    #318723
    Tom
    Lead Developer
    Lead Developer

    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.

    #318725
    Tom
    Lead Developer
    Lead Developer

    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.

    #318771
    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?

    #318779
    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.

    #318901
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 8 posts - 16 through 23 (of 23 total)
  • You must be logged in to reply to this topic.