Ailsa_C

# July 10, 2013 at 9:17 am

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

# July 10, 2013 at 9:34 am

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

# July 10, 2013 at 10:11 am

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

# July 10, 2013 at 11:29 am

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

# July 10, 2013 at 12:20 pm

@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

# July 11, 2013 at 4:56 am

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!