The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do I make my menu resize with browser window?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #269771

    Hi all,

    Im new here and new to web design in general. Ive spent the past couple of months building this website with wordpress and learning as I go. I got to the point where I am 99% happy with it, if not for the fact that my nav menu goes all over the place when the browser window is resized. Ive attempted to look for answers on google, but so far none of the bits of code I tried actually did anything.

    The website in question is

    Thank you in advance for your time.


    I don’t know if that’s how you designed your website, but I see the “contact” link at the second line by default. The menu texts look way too big and a mixture of random capitalization.

    As a result, on a slightly smaller screen (1270px aprx.) the “Testimonials” link also comes to the second line. There are few glitches on the mobile menu that appears on 900px.

    Now tell me what do you mean by “my nav menu goes all over the place”?

    A little more explanation would make it easy to understand the problem.


    Hi Mamun,

    That is exactly what I mean – on both my computers (both on chrome and safari) the menu is one line only just below the logo. I’m guessing you’re seeing it at a different resolution and therefore it’s gone onto two lines (it only does that for me when I reduce the browser window size).

    The mix of capitalisation is because of the custom font I’m using (same one as the logo).

    I had not come across the issue with the mobile menu at 900px – it seems that for some reason it’s not switching to the actual mobile menu I created in which I forced capitalisation.

    I hope this clears things up a little? Sorry if it’s confusing – I will try to explain better if so.

    EDIT: I can no longer reproduce the error at 900px. It appears the mobile menu is working as expected now. Is that the case for you?


    check in the menu CSS, see if there is a fixed height and width. If there is, then remove it.

    clear: both;
    /height: 40px; Remove/
    /width: 400px; Remove/
    float: left;

    also add: under the meta name=”viewport” content=”width=device-width, initial-scale=1″ under the head tag

    hope this helps.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.