Home › Forums › Construction Pro/Build Forum › Edit header on mobile
- This topic has 17 replies, 2 voices, and was last updated 4 years, 5 months ago by Sonl Sinha.
-
AuthorPosts
-
June 22, 2019 at 3:42 pm #125558
Hi
I am using Header Layout 3 and would like to hide the top bar sections when viewing on mobile. Please can you let me know how to do this.
Thank you
June 24, 2019 at 1:01 pm #125614Hi,
Kindly show us your website URL?
Regards,
BradJune 25, 2019 at 6:19 pm #125700Hi
The site is
https://test.peterhibbert.co.uk/wp/
Another issue I have found on mobile view is that the slider doesn’t display properly and keeps looking like it’s loading. Please could you also let me know how to fix that.
Thank you
June 27, 2019 at 8:48 am #125772Hi,
Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:
@media screen and (max-width:479px) { .head-info-area { display:none;} body.site_boxed .nivoSlider { min-height:119px !important;} .logo { margin:16px 0 5px;} }
Regards,
BradJune 27, 2019 at 9:40 pm #125812Thank you, that has worked however I have a few more questions for mobile view:
1. Can the header height be increased to show a slightly larger image? If I alter the height in the CSS then there’s a grey bar at the bottom rather than increasing the view of the image.
2. How to add a menu at the top of the page?
3. Is it possible to have a different footer for mobile vs desktop?
4. Embedded videos don’t resize (see on this page: https://test.peterhibbert.co.uk/wp/smart-controls)June 28, 2019 at 5:54 am #125819Hi,
Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:
@media screen and (max-width:479px) { .thn_post_wrap figure { margin: 0 8px;} .thn_post_wrap figure iframe { width:100%;} .header_wrap.layer_wrapper { margin-top: 36px !important;} .page_head { margin-top:-48px;} .type3 #topmenu { position:absolute; top:0; width:95%;} .header { position:static !important;} }
Is it possible to have a different footer for mobile vs desktop?
Ans: Any example???
Regards,
BradJuly 1, 2019 at 6:38 am #125943Thank you for the quick reply. Unfortunately that CSS has not worked – none of the issues in Q1, 2 or 4 have been fixed.
Re: Q3 – different footer, it was to maybe leave some of the sections out but no longer need to do this.
July 1, 2019 at 6:39 am #125944For reference, this is the full CSS:
span.desc{display: none;}
.home .page-title { display:none;}
.header-right a { color: #3c3486 !important;}
.contact-layout1-right a { color: #415161 !important;}
.thn_post_wrap a { color: #415161 !important;}.header.type3{
height: 160px !important;
}@media screen and (max-width:479px) {
.head-info-area .center .left{ display:none;}
body.site_boxed .nivoSlider { min-height:119px !important;}
.logo { margin:16px 0 5px;}
}.thn_post_wrap a {
font-weight: 500; color: #3C3486 !important;
}@media screen and (max-width:479px) {
.thn_post_wrap figure { margin: 0 8px;}
.thn_post_wrap figure iframe { width:100%;}
.header_wrap.layer_wrapper { margin-top: 36px !important;}
.page_head { margin-top:-48px;}
.type3 #topmenu { position:absolute; top:0; width:95%;}
.header { position:static !important;}
}July 1, 2019 at 7:02 am #125962Hi,
2. How to add a menu at the top of the page?
Ans: Done
Have a look at:
https://imgur.com/a/7jfF4Dv4. Embedded videos don’t resize (see on this page: https://test.peterhibbert.co.uk/wp/smart-controls)
Ans: Done
Have a look at:
https://imgur.com/a/vwI6xcw3. Is it possible to have a different footer for mobile vs desktop?
Ans: Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:
@media screen and (max-width:479px) { #footer .footercols3, .contact-info { display:none !important;} }
Regards,
BradJuly 1, 2019 at 11:51 am #125978Hello
It is still not working on mobile. If I view on desktop as mobile then the menu is there but if I go to the URL on my phone the menu is not there. I have asked a few people to do the same and they also do not see the menu, or have the video resizing working.
Please can you also let me know how to increase the slider height on mobile
Thank you
July 1, 2019 at 12:54 pm #125979Hi,
Kindly use this one
@media screen and (max-width: 63.938em) and (min-width: 20em) { .touchon #topmenu { display:block !important;} }
@media screen and (max-width:479px) { .nivoSlider img { max-width: 170% !important; width: 170% !important; } }
Regards,
BradJuly 1, 2019 at 6:20 pm #125992Thank you for the quick reply again – it’s getting closer!
1. Slider height is larger, thank you
2. The menu is now showing however on the homepage the navigation dots of the slider are visible over the menu.
4. Videos are still not resizing unless the screen is rotated to landscape
July 3, 2019 at 10:22 am #126079Hi,
Kindly use this CSS
.slider-main { z-index:1;} @media screen and (max-width:767px) { iframe { width:100% !important;} }
Regards,
BradJuly 8, 2019 at 9:08 pm #126312Hello
That all seems to be working now. Thank you so much for your help with this!
July 9, 2019 at 5:42 am #126320Hi,
If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/23/
Regards,
Brad -
AuthorPosts
- You must be logged in to reply to this topic.