- This topic has 6 replies, 4 voices, and was last updated 6 years, 10 months ago by deragoth.
- AuthorPosts
- July 26, 2017 at 2:31 pm #3250MrMarquaParticipant
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 #3266HashKeymasterHi,
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 #3297MrMarquaParticipantThanks 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
pAugust 22, 2017 at 4:15 pm #3353MrMarquaParticipantHi 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 #3565HashKeymasterYou need to edit and add CSS in style.css to make the menu sticky across all pages.
January 30, 2018 at 3:34 pm #4663paolozParticipantHi 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 #4674deragothParticipantthx dude, great job!
- AuthorPosts
- You must be logged in to reply to this topic.