[Resolved] navigation stretch only half :)

[dasigna]

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.

[Leo]

Hi there,

Can’t really picture what you are going for.

Do you have an example from other site to share?

[dasigna]

… feared it sounds a bit complicated 🙂

heres a basic mockup:

hope that helps for understanding?

[Tom]

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?

[dasigna]

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.

[Tom]

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.

[dasigna]

hi tom,

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

[Tom]

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;
}

[dasigna]

…!

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.

[Tom]

You’re welcome! Glad I could help 🙂

[dasigna]

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 🙂

[Tom]

I just adjusted the CSS above – should be good to go now 🙂

[dasigna]

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.

???

[Tom]

Can you remind me of the URL?

[dasigna]

credentials for construction site on the way via mail.

[Author]

Posts