Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] navigation stretch only half :)

Home Forums Support [Resolved] navigation stretch only half :)

Home Forums Support navigation stretch only half :)

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • #514112

    hi tom and leo,

    struggling with another idea to realize for a couple of hours already πŸ™‚

    i am trying to achieve sort of mixed boxed and stretched main navigation on desktop; means, the idea is to have the navigation container stretched to the right side, but boxed on the left …
    complicated?? sort of.
    hard to explain. boxed means to have the navigation at the width of the main container, full width expands to both sides of the screen… but the idea is to have this only on the right side. kind of banner that comes from the right.

    currently no idea how to tweak this, all attempts failed so far – so any hint or help is appreciated.

    thanks in advance.

    GeneratePress 2.0.2
    GP Premium 1.5.6
    Customer Support

    Hi there,

    Can’t really picture what you are going for.

    Do you have an example from other site to share?


    … feared it sounds a bit complicated πŸ™‚

    heres a basic mockup:

    hope that helps for understanding?

    Lead Developer
    Lead Developer

    So you want your navigation to start at the left of the container, and stretch all the way to the right outside of the container?


    hi tom,

    … yes that the intention basically. only stretching outside the right of the container till the screen border.

    feels like it should be doable, but so far unable to target the right selectors.

    Lead Developer
    Lead Developer

    Do you have something set up that I can play with? It might be do-able using pseudo elements, but I’m not 100% sure.


    hi tom,

    thanks for looking – credentials are on their way via mail.

    Lead Developer
    Lead Developer

    So the first thing you’ll want to do is set your navigation to contained.

    Then add this CSS:

    .main-navigation {
        position: relative;
    .main-navigation:after {
        content: "";
        height: 62px;
        background: #fff;
        width: 5000px;
        left: 100%;
        top: 0;
        position:  absolute;
        visibility: visible;
    body {
        overflow-x: hidden;


    i am still after the details how exactly this works… but in fact it works like a charm!!
    already tried with pseudo elements, but no chance for me to figure out.

    tom – this is great. really happy πŸ™‚

    thanks again and kudos, honestly.

    Lead Developer
    Lead Developer

    You’re welcome! Glad I could help πŸ™‚


    hum …

    sorry having to pull this up again, but – after the need of submenu items this great piece of code cause some trouble:
    first i had to tweak it because it caused a heavy horizontal scrollbar on page that doesnt make use of the merged header. so the ‘generate-combined-header’ selector before the first part fixed it, and the menue was o.k. with no scrollbar on pages without merged header.

    but now with submenu items set to show upon hover this simply does not take place because of the ‘overflow-hidden’ in second part of the css that refers to the ‘generate-combined-header’ …

    again – the submenu items show as expected on pages with no merged header.

    any further hint to get this solved?? maybe you might have a look again. thanks in advance.

    i know i tend to get into trouble with the menu tweaking thing – sorry for that πŸ™‚

    Lead Developer
    Lead Developer

    I just adjusted the CSS above – should be good to go now πŸ™‚


    hi tom,

    … sadly doesnt resolve it.
    causes a small second scrollbar at the height of the header/nav on nav item hover, but submenue still neighter showing nor reachable.

    one of those things i tried already with no luck.
    my thought at first was: as the generate-combined-header selector is quite high, there must be a way to exclude the one for the sub-menu? but still not able to figure it out.


    Lead Developer
    Lead Developer

    credentials for construction site on the way via mail.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.