Home Support HashOne Nav bar not fixed on pages other than the home page

This topic contains 6 replies, has 4 voices, and was last updated by  deragoth 1 week, 5 days ago.

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


    Hi there. How to i take the menu style that is present on the home page through to all the additional web pages i create using this theme.

    It seems on the home, the nav is an animated Fixed menu with opacity (rgba) but on other pages it scrolls away when the user scrolls down the page.

    How can i maintain the style of the home page nav through to the rest of the site.





    The theme is designed in the way that it is now. If you want to change any thing apart from it then it requires change in code.

    So to change the navbar style, it requires change in code in multiple places and it would be difficult to explain over here.




    Thanks for getting back to me.
    I am going to try work a solution to attach position:fixed to one of the other classes and hope it doesnt cause conflicts.

    Or try talk the client out of this change…

    Have an awesome day forward



    Hi there, ok so my client is insisting on navigation consistancy on their site, which makes logical sense.
    I will need to make the menu position fixed across all pages. Please can you explain to me which php files i need to add a class too.
    I know you said in your reply above that its a long process, but please can i get some help on this.



    You need to edit and add CSS in style.css to make the menu sticky across all pages.



    Hi MrMarqua there are just a couple of files to edit. Better do this in a child theme though. In the js folder, hashone-custom.js file, you need to add the classes of the pages where there’s not the sticky effect.
    In the window.scroll function, change the following line from this:
    $('.page-template-home-template #hs-masthead, .home.blog #hs-masthead')
    to this
    $('.page-template-default #hs-masthead, .page-template-home-template #hs-masthead, .home.blog #hs-masthead, .blog #hs-masthead')

    Then, do the same on the style.css of the theme, adding
    .page-template-default and .blog to the three sections of #masthead starting at line 1152.

       .page-template-default #hs-masthead,
       .blog #hs-masthead,


       .page-template-default #hs-masthead.fadeInDown,
       .blog #hs-masthead.fadeInDown,


       .page-template-default #hs-masthead.hs-black.fadeInDown,
       .blog #hs-masthead.hs-white.fadeInDown,

    In this last block, I changed to hs-black (instead of white) for readability, as the menu’s text is white.

    Hope this helps.
    P.S. How did I do it? inspected elements and TextWrangler.

    • This reply was modified 2 weeks, 6 days ago by  paoloz. Reason: better formatting


    thx dude, great job!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.