Title: Simple coding prob. – Menu overlaps header. Last modified: September 1, 2016 --- # Simple coding prob. – Menu overlaps header. * [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/) * Hey everyone! * So I have a hopefully simple problem. I used some custom CSS to make my header responsive for mobile in the 2013 theme, and now my menu is overlapping the header in mobile. See here: * > [View post on imgur.com](https://imgur.com/LRRsSKb) * Here’s the custom CSS I’m using: * ``` @media (max-width: 360px) { .site-header .home-link { min-height: 50px; } } @media (min-width: 360px) and (max-width: 767px) { .site-header .home-link { min-height: 100px; } } .site-header { background-size: 100%; } ``` * Any ideas? I would ask at the 2013 forum but it’s completely dead (for months/ years) and this is more of a general CSS problem anyway. * Thanks for your time! Viewing 15 replies - 1 through 15 (of 23 total) 1 [2](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/?output_format=md) [→](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/?output_format=md) * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502003) * Please post a link to your site. * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502034) * It’s [http://www.westernidentity.info](http://www.westernidentity.info) . * I would love some help as I still haven’t figured it out, thanks! * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502039) * It’s a bit difficult because your entire header is a background image, so you have to play all sorts of games with that div to ensure the background is always visible. I recomend that your reconsider that and use that as a image rather than a background image. * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502055) * I would do that… but I don’t know how. Could you advise me? I just want that image to always be at the top of the page, and scaled to fit mobile devices. I feel like that shouldn’t be so hard but I’m having a lot of trouble. * Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/) * (@sterndata) * Volunteer Forum Moderator * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502057) * are you using a child theme? If so, edit header.php. * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502058) * Okay, I will. But how, I tried putting a lot of things in a lot of different places, anything specific you can recommend me? * Hope I don’t sound stupid/needy, I tried google and couldn’t figure it out. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502061) * Remove the white space in your header image: [http://westernidentity.info/wp-content/uploads/2016/06/Header2-1.jpg](http://westernidentity.info/wp-content/uploads/2016/06/Header2-1.jpg) * Then you can consider using the ‘contain’ background-size style. * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502068) * I’m not sure what you mean or how that would fix things. For example right now I took out my custom CSS so I’m back to square one, and on mobile you don’t even see the header, where as on desktop it works fine. I just need some simple way to make sure the header is there on mobile, can’t I just write that in somehow? I’m even willing to make another smaller header for mobile if that makes it easier somehow. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502071) * What solution are you looking for? * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502072) * I want the header on my website to show up on mobile the same way it does on desktop. * [http://www.westernidentity.info](http://www.westernidentity.info) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502073) * Have you tried the ‘contain’ method? * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502074) * No, but I’m not sure what you mean by that. * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502076) * I feel like there might be a miscommunication here, just in case, I got it to show up and scale on mobile, but then the menu overlapped it. to my understanding it did this because I made the header part of the background, and therefore it was then overlapped. * In the default state the code for my theme just removes the header entirely for mobile, it just isnt there. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/#post-7502078) * You’ve got loads of “!important” declarations that will override our suggestions of code, so it’s difficult for us to tell you code that will work. * So this probably won’t work; * ``` @media (max-width: 768px) { .site-header { background-size: contain; } } ``` * Thread Starter [monarchzeronyc](https://wordpress.org/support/users/monarchzeronyc/) * (@monarchzeronyc) * [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/#post-7502080) * No, it didn’t work. * It’s just a little frustrating because I noticed that another person’s website uses the same exact theme as me, and he’s solved this problem: [http://www.rooshv.com](http://www.rooshv.com). I’m trying to look at his code to see how, but on mobile his site loads with a smaller header and the menu is in the right place. On mine, on mobile there is no header. Viewing 15 replies - 1 through 15 (of 23 total) 1 [2](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/?output_format=md) [→](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/?output_format=md) The topic ‘Simple coding prob. – Menu overlaps header.’ is closed to new replies. ## Tags * [header](https://wordpress.org/support/topic-tag/header/) * [mobile](https://wordpress.org/support/topic-tag/mobile/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 23 replies * 3 participants * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/) * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/simple-coding-prob-menu-overlaps-header/page/2/#post-7502135) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics