Community Forums › Forums › Archived Forums › Design Tips and Tricks › how to create mobile responsive header lifestyle pro
Tagged: lifestyle Pro, mobile responsive
- This topic has 4 replies, 3 voices, and was last updated 9 years, 5 months ago by lily.
-
AuthorPosts
-
October 26, 2014 at 5:24 pm #129327lilyMember
I've tried everything suggested in the forum, as well as my trusty google search, and I cannot create a mobile-responsive header for my site in lifestyle pro: http://www.wonderfulhealthyhabits.com
I used this tutorial to create a wide full size header. http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/
I used this tutorial in an attempt to create a mobile responsive header. It did not work. I even tried to tweak the code based on responses in the comments to these posts. http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/
In the process I have created all kinds of duplicate/doubled up/overlays/lines going across headers/etc. but can't find the solution.
This is the code I have under my headers.
/* Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #76d2c5; padding: 0px; overflow: hidden; } .site-header { background-image: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header.jpg); width: 1140px; height: 200px; } /* Title Area --------------------------------------------- */ .title-area { float: left; width: 320px; } .site-title { font-family: 'Roboto Slab', sans-serif; font-size: 50px; line-height: 1; margin: 0 0 16px; } .site-title a, .site-title a:hover { color: #fff; text-decoration: none; } .site-description { color: #fff; font-size: 16px; line-height: 1; margin: 0; } /* Full width header, no widgets */ .header-full-width .title-area, .header-full-width .site-title { text-align: center; width: 100%; } .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; } .site-header { background-image: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header.jpg); width: 1140px; height: 200px; } /* Logo, hide text */ .header-image .title-area { padding: 0; } .header-image .site-title a { float: left; min-height: 110px; width: 100%; }
This I have under media queries...
@media only screen and (max-width: 480px) { .header-image .site-title a { background: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header-4801.jpeg) no-repeat; height: 80px; width: 414px; } }
(there is much longer code under media queries 1024 & 768 - not sure if I should paste that too...) Thanks!
http://www.wonderfulhealthyhabits.comOctober 27, 2014 at 2:30 am #129393Ben @ Inbound CreativeMemberFirst of all, delete the lines where it says:
.site-header { background-image: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header.jpg); width: 1140px; height: 200px; }
Just above /* Logo, hide text */. You're duplicating the header.
Then in the media query you've posted, change
height: 80px;
tomax-height: 80px;
and
width: 414px;
towidth: 100%;
Do all that and your problem should be sorted. Let me know if it isn't.
October 27, 2014 at 2:56 am #129404Brad DaltonParticipantOctober 27, 2014 at 8:27 am #129435lilyMember@Ben thanks for the tips. That did not work either, though it did get rid of the duplicate header. Any other ideas? Could it be somewhere else in my code that i'm not looking?
@Braddalton - thank you so much for your tutorials! I did use them to create the full size header and get rid of the padding. The code above is not yours, because as I mentioned, I tried yours, then I tried the pixelista's, then I just started trying anything I could think of. And I am not a coder so I'm just pulling things out of the air.Your advice did help me to get rid of the double header the first time I did that. Thanks for that too. 🙂
October 27, 2014 at 1:07 pm #129467lilyMemberThese are my media queries & I apologize in advance for posting so much code here. @Braddalton I think I followed your tutorial but if I didn't please feel free to correct me. Thanks!
/* Media Queries ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .search-form input[type="search"] { background-image: url(images/[email protected]); } } @media only screen and (max-width: 1139px) { .footer-widgets, .site-container, .wrap { max-width: 960px; } .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 688px; } .content { width: 580px; } .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .site-header .widget-area { width: 380px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .home-bottom-left, .home-bottom-right, .sidebar-primary { width: 272px; } } @media only screen and (max-width: 1023px) { .footer-widgets, .site-container, .wrap { max-width: 772px; } .content-sidebar-sidebar .content-sidebar-wrap, .content-sidebar-sidebar .content, .content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content-sidebar-wrap, .sidebar-sidebar-content .content, .site-header .widget-area, .title-area { width: 100%; } .site-header { padding: 20px 0; } .site-header .title-area, .site-header .widget { padding: 0 20px; } .site-header .widget_nav_menu { padding: 0; } .header-image .site-title a { background-position: center !important; margin: 0 0 16px; margin: 0 0 1.6rem; } .site-header { padding: 0px; padding: 0rem; } .site-header .widget-area { margin-top: 16px; margin-top: 1.6rem; } .site-header .search-form { margin: 16px auto ; margin: 1.6rem auto; .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-footer p, .site-header hgroup, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a { padding: 20px 16px; } .site-header .widget-area { margin-top: 16px; } .site-header .search-form { margin: 16px auto ; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .entry-footer .entry-meta { margin: 0; padding-top: 12px; } .home-bottom-left, .home-bottom-right { width: 332px; } .footer-widgets-1 { margin: 0; } .site-footer { padding: 20px; } } @media only screen and (max-width: 768px) { .header-image .site-title a { padding: 0; margin: 0; } .header-full-width.header-image .site-title a { background-position: 0; margin: 0; } .site-header { background-color: #fff; overflow: hidden; padding: 0; } .site-container { background-color: #FFFFFF; box-shadow: 0 0 5px #DDDDDD; margin: 0 auto; max-width: 1140px; overflow: hidden; padding: 0; } .site-inner { clear: both; padding: 0; } body { font-size: 14px; } .site-container { padding: 20px 5%; width: 94%; } .five-sixths, .four-sixths, .home-bottom-left, .home-bottom-right, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } .site-title { font-size: 32px; } } .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; } .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; } .genesis-nav-menu.responsive-menu .menu-item { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu li.current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; line-height: 1; padding: 20px; text-transform: none; } .genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu a, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu a:hover, .genesis-nav-menu.responsive-menu li:hover > a { color: #fff; } .genesis-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; } .genesis-nav-menu.responsive-menu > .menu-item-has-children > a { margin-right: 60px; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f140"; float: right; font: normal 20px/1 'dashicons'; height: 20px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f142"; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.025); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 12px 20px; position: relative; text-transform: none; width: 100%; } .nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu a:hover, .nav-primary .genesis-nav-menu.responsive-menu li:hover > a { color: #222; } .genesis-nav-menu a { font-size: 12px; } .entry-meta .entry-tags { clear: both; float: left; } .entry-meta .entry-comments a { margin: 0 0 10px; } .lifestyle-pro-home .featuredpost .alignleft, .lifestyle-pro-home .featuredpost .alignright { float: none; margin: 0 auto; } @media only screen and (max-width: 480px) { .header-image .site-title a { background: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header-4801.jpeg) no-repeat; max-height: 80px; width: 100%; } }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.