Static menu bar Swell

  • Author
    Posts
  • #149125

    Hi,

    I have a query about the menu bar in Swell.

    I want it to always be visible when scrolling down any page. I did some digging and found the following code:

    .site-header .top {
    	position: fixed !important;
    }
    
    #video-background {
    	padding-top: 130px;
    }

    This does make the menu bar stay at the top, however there are two issues. On mobile, the text over the header image is further down than normal. I believe this is because of the padding added to the background video, but is there a way to stop this happening?

    Also, and linked to the first problem, on all devices the menu now obscures the featured images on the other pages. Can this be fixed and if so can this be applied to the homepage to in order to avoid having to put padding onto the background video?

    There was one other issue, which is that on the part called ‘services and information’ (essentially the portfolio/projects main page) there is a subheading underneath the title. Can I remove this please? And also get rid of the underline on this page and the individual ‘project’ pages?

    I had another issue that has currently gone unanswered, which is a bit disappointing. However I understand you are probably busy, it would be great if I could get an answer to both threads.

    Thanks very much!

    Sam

    The blog I need help with is: (visible only to logged in users)

    #149141
    danceflooreduk
    Member
    Original poster

    Apologies, the website I need help with is: https://danceflooreduk.com/

    #149764
    themetrust
    Theme Author

    I wouldn’t recommend using a sticky header on mobile as it takes up too much screen real estate. Try this custom CSS:

    
    @media only screen and (min-width : 1036px) {
    .site-header .top {
    	position: fixed !important;
    margin-top: -135px
    }
    
    #video-background {
    	margin-top: 130px;
    }
    }
    
  • The topic ‘Static menu bar Swell’ is closed to new replies.