Community Forums › Forums › Archived Forums › General Discussion › Eleven40 Pro Menu Problem in Mobile view
- This topic has 6 replies, 2 voices, and was last updated 10 years, 2 months ago by bandj.
-
AuthorPosts
-
August 5, 2014 at 1:14 pm #117192cindyjwMember
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.comAugust 5, 2014 at 2:06 pm #117198bandjMemberyou 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.
September 3, 2014 at 11:12 pm #122715cindyjwMemberI 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.
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;
}September 4, 2014 at 9:55 am #122773bandjMemberLooking at it now I still don't see any adjustments for the top padding in this:
.site-header .widget-area in the @media sections
September 4, 2014 at 1:51 pm #122807cindyjwMemberI 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.
September 4, 2014 at 2:41 pm #122819bandjMemberLooks 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.
September 4, 2014 at 2:51 pm #122820bandjMemberIt also loads really slow for me. Are you just using a static page with the slider shortcodes?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.