Edit header on mobile

[info1505]

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

[Sonnal S Sinha]

Hi,

Kindly show us your website URL?

Regards,
Brad

[info1505]

Hi

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

[Sonnal S Sinha]

Hi,

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,
Brad

[info1505]

Thank 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)

[Sonnal S Sinha]

Hi,

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,
Brad

[info1505]

Thank 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.

[info1505]

For 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;}
}

[Sonnal S Sinha]

Hi,

2. How to add a menu at the top of the page?

Ans: Done

Have a look at:
https://imgur.com/a/7jfF4Dv

4. 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/vwI6xcw

3. 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,
Brad

[info1505]

Hello

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

[Sonnal S Sinha]

Hi,

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,
Brad

[info1505]

Thank 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

[Sonnal S Sinha]

Hi,

Kindly use this CSS

.slider-main { z-index:1;}
@media screen and (max-width:767px) {
iframe { width:100% !important;}
}

Regards,
Brad

[info1505]

Hello

That all seems to be working now. Thank you so much for your help with this!

[Sonnal S Sinha]

Hi,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/23/

Regards,
Brad

[Author]

Posts