April 13, 2018 at 7:38 am #269771
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 http://gillandbassacoustic.co.uk/
Thank you in advance for your time.April 13, 2018 at 8:31 am #269777
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.April 13, 2018 at 8:42 am #269778
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?April 13, 2018 at 10:17 am #269783
check in the menu CSS, see if there is a fixed height and width. If there is, then remove it.
/height: 40px; Remove/
/width: 400px; Remove/
also add: under the meta name=”viewport” content=”width=device-width, initial-scale=1″ under the head tag
hope this helps.
You must be logged in to reply to this topic.