disappearing top nav from 870 – 1000px?

[Ailsa_C]

Hi, My top navigation (language chooser) disappears from 870 – 1000px screen width or so and then suddenly appears again. I can’t figure it out – maybe my logo causing problem? thanks!

http://www.mydog.ie/wordpress/

[waylaid]

Edit: Ignore this, it doesn’t actually explain why it comes back when screen is a little narrower…

In the media query – max-width: 980px – your CSS rule for **.suf-widget-2c** (margin: 5px 0) on line 745 is being overwritten by the !important declaration on line 61 (margin: -102px 0 !important;).

You’ll need to add !important to line 745 i.e.
**margin: 5px 0 !important;** if you can’t remove the previous declaration for whatever reason.

[Ailsa_C]

Thank you waylaid. That works perfect from 870 onwards now. However, anything narrower than 870 the bar gets pushed under the logo and disappears on a mobile (getting my head around media queries has been a battle for me!).

[JohnMac4]

It’s your structure. You have “responsive” elements, but you haven’t put them correctly in the HTML or CSS.

Think about structuring the

element and the header widgets area differently. Maybe encapsulating them into the same div, but giving them widths so that you have them floating properly in the encapsulating div.

I played around with it in the Google Chrome editor and was able to solve the issue. I can put code down later if need be.

[Ailsa_C]

@JohnMac4 Thank you so much for reply.
Yes I had a feeling my structure is all messy. I was trying to overwrite an existing style sheet in child theme without going into the html/php structure ‘cos that scares me (relative newbie!). But I guess I have to give it a shot.
If you had the code handy there without too much trouble that’d be really great.

[Ailsa_C]

Fixed the issue by setting the header width to 100% across all media queries and fixing the top margin to -102px. Thanks for suggestions above – really helped!

[Author]

Posts