[Resolved] Navigation alignment and search box width

Home Forums Support Navigation alignment and search box width

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #943081
    Max

    Hi there,

    I am using the latest GP Premium. I also took a look at around eight search result pages worth of content and could not really find a solution to my issue. Unfortunately as of now I only know how to apply code but not how to write it myself.

    What I would like to achieve:

    1.) Currently the primary inner navigaton width is contained and the alignment is set to center. The issue is that it does not align nicely with the rest of my content – only on desktop, that is. The left and right alignment options do no suit my purpose either. I would like the left edge of the primary navigation (in this case the “Home” menu item) to align with the left edge of the content container, e.g. on the “science posts” page.

    2.) Upon clicking the navgiation search (magnifying glass) the search bar pops up. Currently the search bar is stretched out far beyond the left edge of the content/of the menu. I would like it to align with the left edge of the menu/the left edge of the content (like on the “science posts”) on desktop.

    Any help – even pointing me to the according forum post would be much appreciated.

    PS: One thing I noticed while scrolling through numerous search result pages: At times there are forum posts which contain a lot of code and stretch across the screen vertically. I think it would improve overall readability/search efficiency greatly if those posts were to be automatically shortened. I do not know how big of an undertaking this would be but personally I would consider it a neat “nice to have”.

    Best wishes

    #943331
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your inner navigation and content area are actually perfectly aligned: https://www.screencast.com/t/zwtYFayDcEx

    However, it doesn’t look that way because you’ve added 100px of padding to the left of the content.

    Are you wanting the edge of your navigation to align with your content?

    #943605
    Max

    Hi Tom!

    I opened the console and also saw what you mean. I removed the padding and set the menu alignment to left and everything aligned (now it is back to the way it was before). I do want to keep the 100px padding though. Is there any way to adapt the menu/search bar to that width, specifically in such a way that their left edge aligns with the left edge of the headings/content on the “overview” pages, e.g. “science posts”.
    I believe the homepage is another matter since I use Elementor there.

    #943630
    David
    Staff
    Customer Support

    Hi there,

    that’s going to be quite tricky to maintain responsiveness and what about the pages where you don’t have the 100px padding? If they were to be left as is there would be a noticeable shift in the navigation.

    May i ask what is the purpose of the 100px padding?

    #943674
    Max

    Hi David,

    Hm all right. Due to the right sidear on these pages, on desktop and without the padding, the focus of the pages would shift much more towards the sidebar. With the padding enabled the content seems seems to be more centered with roughly the same white space on the left and right side next to the content/the right sidebar (give or take).
    So basically: I would like to convey a more or less symmetrical impression with plenty of white space on the left and right hand side next to the content/sidebar. Without the padding and with the menu set to “centered” the whole page would convey an uneasy/restless impression, to my mind. I could live with the content/sidebar being shifted slightly more to the right but once it gets moved to the left, the viewer’s focus is more on the sidebar (especially on larger screens) which I would like to avoid.

    A possibly easier alternative would be to move the sidebar farther to the right (while the content stays in place) to let the page resemble more a classic blog layout. But I could not achieve that by increasing the padding on the right side of the content since the content itself was then moved more to the left.

    If there is any other way to achieve that I am all eyes.

    #944173
    Tom
    Lead Developer
    Lead Developer

    What if you forced the navigation to align like this?:

    @media (min-width: 769px) {
        .right-sidebar .inside-navigation {
            padding-left: 50px;
            padding-right: 50px;
            box-sizing: border-box;
        }
    
        .right-sidebar .navigation-search.nav-search-active {
            margin-right: 50px;
            margin-left: 50px;
            width: auto;
        }
    }

    Let me know 🙂

    #944417
    Max

    Hi Tom!

    Thanks for the code. I adapted the variables a bit and now things are looking fine. As far as I could see there are (almost) no problems with responsiveness either.

    Now I tried to adjust the container of my Elementor-built Homepage (in order to make the homepage elements align as well) but that proved to be difficult – I suppose, I would have to edit the template manually.
    That gave me the idea of using GP sections instead. After all my homepage is not that elaborately structured and thus, the sections plugin from GP does offer a nice and seemingly easier alternative.

    There is just one problem: I set the Layout to “Content / Sidebar” but as you can see – there is no sidebar. I also set the box type layout in the sections’ setting options to contained but no change either.
    Do you know what might be causing the issue?

    #944693
    Tom
    Lead Developer
    Lead Developer

    Sections remove the sidebar by default, and also set the page width to 100%.

    You can allow sidebars on pages using Sections like this: https://docs.generatepress.com/article/allow-sidebars-sections/

    Another option you have is to use Gutenberg – you should be able to achieve the same result 🙂

    #944721
    Max

    That is good to know – thank you for the link!

    Best wishes

    #944723
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.