[Resolved] Header and 1st Textblock

[Torsten]

Cool, thanks a lot!
I added text-align: left; and padding: 15px 10px; so now it’s

.nav-contact {
    order: 50;
    flex: 1 0 100%;
    text-align: left;
    padding: 15px 10px;
}

[David]

Glad to be of help 🙂

[Torsten]

Hi David,
I’m almost happy with Navigation / Header (set as an element), only the hamburger-menu is now placed above the element.
Is there a way to display it lower (z-index:50px;) for desktop?
right-aligned and centered fon tablet/mobile?
thx ahead,
Torsten

[Ying]

Hi Torsten,

Can you try this CSS?

div#primary-menu {
    position: absolute;
    right: 0;
}

[Torsten]

Cool!
I added padding-top: 80px; but its only working for desktop, not (yet) for tablet and mobile.
Could you please help one more time?
best,
Torsten

[Fernando]

Try adding this:

nav#mobile-header button.menu-toggle {
    padding-top: 80px;
}

[Torsten]

Thanks for directions for the selector, the following code did it:

nav#mobile-header button.menu-toggle {
	  position: absolute;
    right: 0;
}

Thumbs up!

[Fernando]

You’re welcome, Torsten!

[Torsten]

Hi,
I recognized another little problem.
When I scroll down on my “real” mobile the Hamburger icon has not the right-padding of 50px as the Menu has at the startpoint.
Adding padding-right: 50px; to

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a, .sticky-navigation-transition .navigation-branding .main-title {
    line-height: 20px;
}

gives me a right-padding for the whole page.
Can you help me with the code for the Hamburger Menu Logo on Sticky Menu?
I didn’t have the effect on Chrome when logged in as an admnin, that’s why I missed it beforehand.
Thanks ahead,
Torsten

I don’t have this problem on Firefox for mobile, only Chrome for mobile.

[David]

I don’t see the hamburger alignement issue did your resolve that ?

but i do notice there is some horizontal scroll on mobile, which is coming from the text in the site footer.

[Torsten]

no, I didn’t resolve it, it’s still happening, as said, it only happens on my physical mobile with Chrome Browser, not when resizing browser window nor in the preview in customizer. But I notice now that I can swipe to the left, I didn’t notice that before, maybe that’s what’s causing the mentioned effect?

I deactivated footer widgets.
Still happening. I can swipe, effect still happening on mobile / Chrome.
Can you help me get rid of the footer scroll possibility?
Let’s see if that helps.
Thanks!
Torsten

[David]

On closer inspection there are quite a few elements on the page where the layout is creating horizontal scroll.

Try this CSS to stop it:

html, body {
    overflow-x: hidden;
}

[Torsten]

Solved it!
Thanks a lot.

[David]

You’re welcome

[Author]

Posts