Home Forums Free Themes Signify Dark Is It Possible to Left Align the Header Image & Menu Bar?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #189243
    Birchwood
    Participant

    Hello,

    Thank you for the Signify Dark theme. I’d like to know whether it’s possible to align the header image and header menu bar to the left of the page container. What I’m hoping to accomplish is to align the header content with the left edge of the content in the page container below for a more consistent appearance.

    I’d also like to know whether it’s possible to make the header menu “sticky” so it stays pinned to the top of the page when scrolling down.

    Thank you!

    #189273
    Psink
    Keymaster

    Hello,

    First of all thank you for choosing Signify Dark theme for your site. Regarding the header alignment could you please explain more details and provide some reference screen shot.

    Regarding the sticky menu add this js and css code

    JS code
    jQuery(document).ready(function( $ ){
    $(window).scroll(function() {
    if ($(this).scrollTop() > 1) {
    $(‘#masthead’).addClass(‘sticky-head’);
    }
    else {
    $(‘#masthead’).removeClass(‘sticky-head’);
    }
    });
    });

    CSS code

    #masthead.sticky-head .site-branding{
    display: none;
    }

    #masthead.sticky-head {
    position: fixed;
    z-index: 1;
    background: #000;
    width: 100%;
    }

    #masthead.sticky-head #site-header-menu{
    border: none;
    }

    You can the the screen record to add this code
    https://www.awesomescreenshot.com/video/16399398?key=9df412e6f41f9058f38fbb2e556613bf

    #189274
    Psink
    Keymaster

    Hello,

    First of all thank you for choosing Signify Dark theme for your site. Regarding the header alignment could you please explain more details and provide some reference screen shot.

    Regarding the sticky menu add this js and css code

    JS code
    jQuery(document).ready(function( $ ){
    $(window).scroll(function() {
    if ($(this).scrollTop() > 1) {
    $(‘#masthead’).addClass(‘sticky-head’);
    }
    else {
    $(‘#masthead’).removeClass(‘sticky-head’);
    }
    });
    });

    CSS code

    #masthead.sticky-head .site-branding{
    display: none;
    }

    #masthead.sticky-head {
    position: fixed;
    z-index: 1;
    background: #000;
    width: 100%;
    }

    #masthead.sticky-head #site-header-menu{
    border: none;
    }

    You can the the screen record to add this code
    https://www.awesomescreenshot.com/video/16399398?key=9df412e6f41f9058f38fbb2e556613bf

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