Reduce Fixed Header Size on Scrolling

Home › Forums › Jevelin Theme › Reduce Fixed Header Size on Scrolling

Home › Forums › Jevelin Theme › Reduce Fixed Header Size on Scrolling

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    RESOLVED Posts

  • wkolari
    Participant

    I’m using the Corporate Theme with Header Style 5 and am trying to find a way to reduce the fixed header navigation bar size (height) when I scroll down (reduce by half the size). I’ve tried the codes in the existing post below, but no changes occur:

    https://support.shufflehound.com/forums/topic/make-the-nagivation-header-smaller/#post-6842

     

    Ideally, it would be nice to have the header size change for both desktop and mobile site versions (desktop most importantly though). How can this be accomplished?

    Shufflehound Support
    Moderator

    Solution for this topic

    Hi @wkolari,

     

    I hope you are well today and thank you for your question.

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #page-container .sh-header-5.sh-sticky-header-active .sh-nav .menu-item {
    height: auto !important;
    margin: 0 !important;
}

#page-container .sh-header-5.sh-sticky-header-active .sh-nav .menu-item a {
    line-height: 20px!important;
    height: auto !important;
}

.sh-sticky-header-active header.primary-mobile,
.sh-sticky-header-active header.primary-desktop {
    height: 85px !important;
}

.sh-sticky-header-active .header-logo {
    padding: 5px 0;
}

     

    Best regards,
    Shufflehound team

    wkolari
    Participant

    Thanks for the reply! The codes is working well for the desktop version, but is not modifying the mobile site. Is there any way to reduce the white space further on the mobile site header nav bar? Screenshot attached!

     

    Thanks!

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    Try using following custom CSS code for mobile site.

     

    .sh-header-mobile-navigation .sh-nav-container,
.sh-header-mobile-navigation .header-logo {
    padding: 10px 0;
}

    wkolari
    Participant

    That worked great, thank you very much for the quick reply and support! Much appreciated!

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

    Vaughan53
    Participant

    Hi ShuffleHound Support,

     

    I have 3 small queries relating to the header and video posts on blog pages.

     

    1)

    I’ve recently used the CSS code you’ve mentioned in this post to reduce size of mobile header. It worked perfectly.

     

    The issue I have now is the header background colour. It stays white and filled when scrolling down through the homepage and blog pages but not on service pages (pages listed in top menu *Japanese Tutoring page and *Japanese Classes page). (<b>This is issue is when viewing the website on a mobile device. )</b>

     

    For some reason the header goes transparent and you can only see the red circle logo and the menu tab.

     

    Website – http://www.japanesetutormelbourne.com.au

     

    2)

    Could you point me in the direction to change the colour of font for the colour in the tab in the header as well?

     

    I’ve tried changing colour in theme settings/styling but every time I select be wrong area and need to restart everything from start.

     

    3)

    custom video sizing for pages, and blogs.

     

    Currently I’m having to manually reduce the preview size of a video in pages and blogs so they fit on mobile device screen.

     

    Problem is this makes the video preview small on desktop as well which I don’t want and it still looks strange on mobile view regardless. Is there a way to set video preview sizes custom for pages, blogs on desktop and mobile views and have them more centred?

     

    Page Example

     

    http://www.japanesetutormelbourne.com.au/japanese-classes-melbourne/

     

    Blog Example

     

    http://www.japanesetutormelbourne.com.au/learn-japanese-melbourne

     

    Thank you

     

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)