[Resolved] I need a hand with a sticky menu (position absolute, retina resolution)

[Hernan]

Hello, I’m about to finish a web page but I found a problem that I can’t solve with the sticky menu

For the sticky logo I apply the following code to the logo (I want it to be quite far to the left)

#sticky-navigation .navigation-branding {
        position: absolute;
        left: 10%;
        transform: translateX(-50%);
        z-index: 1000;
    }

To position the sticky menu I am using the following (I want it to be quite to the right)

    .main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
        
  padding-left: 66%;
			padding-right: unset;
    justify-content: space-between !important;
    max-width: 100%;
}

When working in 1080p and lower resolutions I have no problems, it’s responsive enough for most scenarios

But on a macbook the sticky menu is generated second line, I could keep moving the menu even more to the left but I would like to position that menu as far to the right as possible

which way could I go?

Thank you !

[Fernando]

Hi Hernan,

Can you try removing those two sets of code, and then, we’ll start from scratch. Once you remove it, let us know how you would like your menu and sticky menu to look like.

[Hernan]

Yes of course it’s simple

I just want the logo on the left and the menu on the right in the sticky menu

Right now it works fine pretty much everywhere, I’ve only had issues on retina resolution

Maybe I could try a left 50% padding on the sticky menu but it would be centering the menu too much. I have also thought of creating a media query just for this, but I think it is not the best solution since the visitor will still have problems if he does not occupy the maximized window

Although, thinking about it, maybe I should just leave it by default. I like the way it looks, I just wish the logo was a bit more to the left and the menu a bit more to the right

I’m open for any advice

Thank you !

[Fernando]

I see.

What if you leave the setting by default, and then alter the padding in Appearance > Customize > Layout > Header?

[Hernan]

From what I understand the sticky menu cannot be modified like this

But I’m testing, maybe I have another CSS class that is preventing it from seeing the padding

[Fernando]

The padding there should take effect on the sticky nav as well.

Let us know how it goes.

[Hernan]

What I mean is that you can modify a bit of padding in the sticky menu in the theme menu but there is a limit (the menu is quite central)

Something curious just happened to me, in a test environment I got it, but I don’t have the same options in real web, I think the “bug” was caused by toggling “use navigation as header” that option enables content width in primary navigation, if one changes save changes there and disable again “use navigatio as header” one can set full width to sticky menu

I’m not sure if I explained myself or if it’s really a good idea to leave it like that

(normal)

(forced to fulldwidth)

I’m going to do a little more testing, although I think the solution may be that way. It would also be great to solve it from the options of the theme itself

[Fernando]

Not sure if I understand correctly, but if you set “use Navigation as header”, some settings will “disappear”/be disabled by default. It’s not a bug.

Alright, let me know if you’ll be able to set the spacing you prefer. If not, we’ll be here to assist. We can also do it through custom CSS if what you want is not possible through the customizer.

[Hernan]

Right, what I mean is that those options can be accessed even having disabled “use navigation as header”

With the theme customizer the header is limited by the inner container (padding can be applied, but always from the edges of the container, that’s why it looks too close to the center)

I think I was able to achieve it, it is not very elegant but summarizing what I did was:

– Enable “use navigation as header”
– Without save, disable “use navigation as header”
– In “Primary navigation” I put “Inner navigation width” to full
– With that both elements (logo and menu) are stuck to the extreme left and right respectively. Then it only remains to add some padding (the theme customizer does not work when the fulld width is forced)
– Padding for sticky logo sometime like:

#sticky-navigation .navigation-branding {
        padding-left: 30px;
        z-index: 1000;
    }

– Padding for sticky menu sometime like:

#sticky-navigation  {  
			padding-right: 30px;
			
}

I am satisfied with the final result but I am afraid that in some update I will lose this configuration. Although on the other hand it don’t seem so serious, if I lost the inner navigation on full width, the sticky elements would simply be somewhat centered again

But if you tell me that what I did is very wrong, I understand and I am willing to take another path. Although right away it doesn’t look bad and behaves well in different resolutions (I tried it from 720p to retina, it works fine)

I would appreciate any advice

Thank you !

[Fernando]

“Inner navigation width” in Primary Nav settings should always be available with “Use navigation as header” enabled or disabled.

What you’re doing is alright. You’re configuration shouldn’t disappear when there’s an update.

[Hernan]

Thank you very much !

[Fernando]

You’re welcome Hernan!

[Author]

Posts