Edit header on mobile

Home Forums Construction Pro/Build Forum Edit header on mobile

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #125558
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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

    #125614
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL?

    Regards,
    Brad

    #125700
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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

    #125772
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    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

    #125812
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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)

    #125819
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    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

    #125943
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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.

    #125944
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

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

    #125962
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    Hi,

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

    Ans: Done

    Have a look at:

    View post on imgur.com

    4. Embedded videos don’t resize (see on this page: https://test.peterhibbert.co.uk/wp/smart-controls)

    Ans: Done

    Have a look at:

    View post on imgur.com

    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

    #125978
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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

    #125979
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    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

    #125992
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    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

    #126079
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    Hi,

    Kindly use this CSS

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

    Regards,
    Brad

    #126312
    info1505
    Participant
    • Topics: 4
    • Replies: 19
    • Total: 23
    Member since: March 23, 2019

    Hello

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

    #126320
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25474
    • Total: 25474
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Brad

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.