Styling of Mobile Nav with 940px fixed width

Design help General
1

Hi :slightly_smiling:

I’ve got a problem that is driving my completely nuts!
My mobile navigation is meant to have centered text, but when I resize the browser, the text links stay where they are instead of flowing into the center like they should. I’ve checked the code against other sites Ive made and I’m completely at a loss as to why its not working…

Any ideas?

532×550 26.7 KB

Here is my public share link: https://preview.webflow.com/preview/f4wealth-2?preview=2e9927bd03824c1a70425eeb180cd600
(how to access public share link)

2

No idea, but it might have something to do with that giant embed at the top of your site.

3

Your custom styles are making the nav elements (both desktop and mobile) have a 940px width, due to your media query.

/*----------------------------------------------------------------------------*/
/*-----------------------------SMALLER DESKTOPS-------------------------------*/
/*----------------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  img.logo {
    width: 279px;
    height: 59px;
    padding-top: 5px;
    float: left;
  }
  header {
    text-align: right;
    width: 100%;
    height: 110px;
    margin: 0 auto;
  position: fixed;
  z-index: 100;
  }
  nav {
    width: 940px;
    margin: 0 auto;
  }
}

You should not be adding custom styles unless absolutely necessary. Even then, you need to know what you are doing as well.

1 Like
4

Hello @Karl_M

Reason of this behavior: huge overflow.
Reason of overflow: elements which moved out of screen view for interaction

Set overflow: hidden for categories-section, it should fix the overflow and most likely issues with menu too.

Regards,
Anna

P.S. @samliew, hi hide custom made menu on mobile

5

Noted. But as he also has a nav element in the mobile menu, it affects it as well, and the width is set to 940px.

See if yourself http://f4wealth-2.webflow.io (use console style inspector)

6

Ahhhhhhhhhhh…Right, yep that’s it alright. Thanks for the quick reply everyone :slight_smile:

I realise it’s a bit hacked together, the navigation was a piece of code I had from before webflow, with the scroll interaction on it that i wanted to use. I guess I shouldve realised it was using the same class name as something else. dumb dumb dumb dumb dumb!

Next time I wont be lazy and just do it all in webflow!

7

Well I’ve fixed the navigation but my client has come back with a separate issue - but I’m thinking it might be the overflow problem you mentioned @sabanna?

I can’t check it right now (at work) but here’s a screenshot that he sent me, from his iPhone 6 Plus:

1242×2208 343 KB

Would the overflow be causing this? It seems it’s only on the front page.

8

actually never mind, that’s what it is! Thanks for the help :slightly_smiling:

1 Like
9

:smiley: Always welcome. Glad you found out the way to fix it.

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.