Solved

Need help fixing responsive CSS so mobile navigation menu pushes down content instead of overlapping it

Posted on 2014-03-13
2
1,001 Views
Last Modified: 2014-03-13
I'm currently working on the following responsive html5 homepage template for a Wordpress site:

http://wordpress.silvermanacampora.com/wp-content/themes/silvermanacampora/index-new.html

The problem I'm having is -- when viewing the site on my iPhone -- and when pressing the "Main Menu" button (which toggles the displaying of a very tall navigation menu) --- the navigation menu is overlapping and hiding all of the content that's underneath it -- instead of pushing it down.  

I suspect that there may be a problem with my having specified a height value to the navigation menu:

ul#hp_navigation { float:none; display:block; width:100%; background-color:#00334E !important; text-align:center; margin:0 0 0 0; border-top:1px solid #fff; height:825px; }	

Open in new window


However -- if I don't specify a height value -- then the Main Menu button doesn't move down to underneath the expanded menu like it's supposed to.

What do I need to do / change in my CSS in order to fix this problem?

Thanks,
- Yvan

P.S. I have all of this working correctly elsewhere on the Wordpress site (ie: http://wordpress.silvermanacampora.com/who/ ) -- but I can't seem to figure out what's different about my new homepage that's resulting in this odd behavior.
0
Comment
Question by:egoselfaxis
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39926661
in #hp_header {} remove
height: 300px;

In #hp_header {} remove
height: 248px;

In #nav-toggle {} remove
display: none;

Might need some more tweaking.
0
 

Author Closing Comment

by:egoselfaxis
ID: 39927359
Thank you so much!  That did the trick.

- yg
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Apple - country wise 6 36
Poster Video HTML 5 Scale to fit video 3 37
Apply tab index in forms 6 33
Form Submit falis 6 24
Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now