Responsive header height.

Home › Forums › Jevelin Theme › Responsive header height.

Home › Forums › Jevelin Theme › Responsive header height.

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

  • roobinda
    Participant

    Hi there. Firstly may i say, great theme and awesome support. Thank you!

     

    I have pushed my nav bar a certain distance from the of of the browser window as I am using the upper most part of my background as the header image. I did this with the following custom css:

     

    #page-container .header-standard-position li a {
    padding-top:270px;
    }

     

    The URL is http://www.edenfestival.co.uk/SITE

     

    However, you’ll see when the browser window is resized the nav buttons should really move inline with the background and page elements. I have tried using % for the padding, but this seems to put the nav buttons out of alignment.

     

    Any idea how I can achieve a responsive header height?

     

    Also, there seem to be 2 faint white lines running across the page, one of which bisects the nav bar. Do you know why this is?

     

    And finally, the menu button for mobile browsers (2 horizontal lines in a square): can this be styled/edited at all? Can I add a background colour? Can it be repositioned?

     

    Thanks in advance.

     

    Reuben.

    Shufflehound Support
    Moderator

    Solution for this topic

    Hi Reuben,

     

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

     

    Any idea how I can achieve a responsive header height?

    It’s hard to achieve like this. You have to use multiple browser size conditions like following and adjust the padding.

     

    
@media (max-width: 1025px){
#page-container .header-standard-position li a {
    padding-top: 170px;
}
}

@media (max-width: 900px){
#page-container .header-standard-position li a {
    padding-top: 160px;
}
}

@media (max-width: 800px){
#page-container .header-standard-position li a {
    padding-top: 150px;
}
}

@media (max-width: 768px){
#page-container .header-standard-position li a {
    padding-top: 86px;
}
}

    Also, there seem to be 2 faint white lines running across the page, one of which bisects the nav bar. Do you know why this is?

    These are border lines of header which you can remove 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-top,
#page-container .sh-header {
    border: 0 !Important;
}

    And finally, the menu button for mobile browsers (2 horizontal lines in a square): can this be styled/edited at all? Can I add a background colour? Can it be repositioned?

    Yes you can style/edit it by developing custom CSS code and use it as described above.

     

    Best regards,
    Shufflehound team

    roobinda
    Participant

    That’s great. Thank you.

     

    What is the class name or ID of the menu icon? I can’t seem to select it with web inspector…

    Shufflehound Support
    Moderator

    Solution for this topic

    That’s great. Thank you.

    You are most welcome here 🙂

     

    What is the class name or ID of the menu icon? I can’t seem to select it with web inspector…

    Its selector is “.sh-header-mobile-navigation .sh-nav-dropdown .c-hamburger” which you can use as following.

    .sh-header-mobile-navigation .sh-nav-dropdown .c-hamburger {
    background-color: transparent;
}

.primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger:not(.is-active) span,
.primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:before,
.primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:after {
    background-color: #fff!important;
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)