Nav bar not fixed on pages other than the home page

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 26, 2017 at 2:31 pm #3250
    MrMarqua
    Participant

    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.

    thanks

    July 30, 2017 at 8:45 am #3266
    Hash
    Keymaster

    Hi,

    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

    August 2, 2017 at 4:10 pm #3297
    MrMarqua
    Participant

    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
    p

    August 22, 2017 at 4:15 pm #3353
    MrMarqua
    Participant

    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.

    October 3, 2017 at 11:58 pm #3565
    Hash
    Keymaster

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

    January 30, 2018 at 3:34 pm #4663
    paoloz
    Participant

    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,

    and

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

    and

       .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.
    Paolo
    P.S. How did I do it? inspected elements and TextWrangler.

    February 7, 2018 at 7:49 pm #4674
    deragoth
    Participant

    thx dude, great job!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Scroll Top
Scroll Bottom