Eleven40 Pro Menu Problem in Mobile view

[cindyjw]

Please help me figure out how to fix this. When I view my website on ipad or iphone, there is a large space between the menu and the header which covers up part of the page.

I had made the header area height larger to fit the logo. Looks great on the desktop, but not in mobile view. I don't know if that caused the problem.

Thank you in advance!

Cindy

http://mariesgreatevents.com

[bandj]

you have to make adjustments in the @media portion.

at the first break 1139px your .site-header .widget-area has padding-top: 150px; You can make that smaller, even 0.

Then use css to position the logo and menu.

[cindyjw]

I know enough to be dangerous! That's the problem. Tried changing the @media portion with padding-top at 0px, but I don't know exactly how to get the logo and menu positioned. So it still isn't fixed. I'm not getting enough of my slider showing. And my menus aren't working for mobile. Would it be possible for someone to help me with the exact code? Here's the code in my custom css editor (without the @media changes). It's probably a big mess now.

http://mariesgreatevents.com

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"] {
background-color: #a34141;
}

.entry-content {
padding-top:16rem !important;
}

#gallery-2 img {
border:0px solid #CFCFCF !important;
}

#gallery-1 img {
border:0px solid #CFCFCF !important;
}

/*Minimum Pro Custom*/
a {
color:#00b1c5;
text-decoration:none;
}

.site-header {
background-color:#FFFFFF;
background-image:url(http://mariesgreatevents.com/wp-content/uploads/2014/07/ChevronPattern.png);
background-repeat:repeat-x;

}

.header-image .site-title a {
float:left;
min-height:203px;
width:100%;
}

.title-area {
float: left;
width: 360px;
}

.site-header .widget-area {
color: #fff;
float: right;
text-align: right;
width: 750px;
padding-top: 150px;
}

.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 213px;
text-indent: -9999px;
max-width: 360px;
}

.site-inner {
clear:both;
margin:3rem 0 4rem;
}

.site-header {
background-color:#ffffff;
}
.site-footer {
background-color:#babbbc;
}
element.style {
background-position:50% 0;
}
.home-section-1, .home-section-3, .home-section-5 {
-webkit-background-size:cover;
background-attachment:fixed;
background-color:#FFFFFF;
background-position:50% 0;
background-repeat:no-repeat;
background-size:cover;
}

.home-odd, .home-odd a:hover, .home-odd h1, .home-odd h2, .home-odd h3, .home-odd h4, .home-odd h5, .home-odd h6, .home-odd .featured-content .entry-title a, .home-odd .widget-title {
color:#FFFFFF;
}

.home-even, .home-odd {
clear:both;
font-size:28px;
overflow:hidden;
padding:145px 0 200px !important;
text-align:center;
}

.site-header .widget-area .genesis-nav-menu a {
color: #333;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #6f4a8e !important;
}
.site-header .sub-menu {
background-color: #00b1c5;
}
.header-image .site-title a {
height: 203px !important;
display: block;
text-indent: -9999px;
max-width: 360px !important;
}
.borderimage {
border-bottom: 2px solid #f5f5f5;
margin-bottom: 2rem;
padding: 0 0rem;
}

img.border {
margin: 20px;
padding: 5px;
border: solid #999999 1px
}

img.border2 {
border:2px solid #999999;
margin:20px;
padding:0px;
}

.sidebar {
display:inline;
font-size:1.4rem;
padding-top:20.2rem;
}
.entry-content {
padding-top:12rem;
}

[bandj]

Looking at it now I still don't see any adjustments for the top padding in this:

.site-header .widget-area in the @media sections

[cindyjw]

I took them out because I didn't think I did them right.

My site is live and so I can't have it looking worse than it already is. But I could test with some code. I adjusted the @media with padding: 0 but the menus aren't acting responsive due to something I've already done and it still covered up my slider.

[bandj]

Looks like your @media starts at 1139px.

Not sure why your menu is not responsive. But being that it is not change the width of the menu (right now it's 750px) to something smaller so that it will fit next to the logo. You'll still have to change that 150px padding to something smaller also.

That should allow you to get the whole slider to show.

[bandj]

It also loads really slow for me. Are you just using a static page with the slider shortcodes?

[Author]

Posts