Hi What setting/css i need to a page css, if I want only sticky menu to be displayed not expanded header.
Hi,
From what I understand you want to make the header display in sticky mode at all times. There is no option for this. You could just use a different header style, like header style 4 for example
– https://forum.tagdiv.com/header-styles/
– https://www.screencast.com/t/BgHJ758V
That header style is similar to what you want to have. Please correct me if I misunderstand.
Thanks
I know this , I want to use a specific head for some particular page.
for one page I dont want to show expanded header.. only i want to show the head which comes when u scroll down (with sticky meanu)
Hi,
There can only be one header style for all the pages. You can not have a different header style on a particular page. To make the menu display like in the affix state by default would require changes to the header style, and then create a condition to make them apply only a specific page.
Thanks
In that case can you tell me which javascript function changes the menu header while scrolling down. from normal menu to sticky menu.
I will call that java script event, using that i can show sticky menu instead of expanded one …
Hi,
You could try to add the class that modifies the header menu when sticky to the menu, but that would interfere with the top menu that you have on your website
– https://www.screencast.com/t/689rGLDon1
– https://www.screencast.com/t/hfqYYDcM3iI6
Modification will have to be made to the js of the theme as well. As I understand you want this to apply on a specific page so that would mean more work, if even possible.
You could possibly achieve this another way using Css, to modify the header to look similar to the sticky state
– https://www.screencast.com/t/mdGrr1Mk
And then have that code apply for a particular page, based on the page Id
– https://www.screencast.com/t/GREgtoZ9p
This is the code I used in the example if you should decide to use it, you just have to use the page Id that you want, and enter it in Theme panel->Custom Css
.td-header-menu-wrap-full,
.td-header-menu-wrap,
.td-header-sp-logo {
height: 48px!important;
}
.td-header-style-7 .sf-menu {
margin-top: 0!important;
}
.td-header-style-7 .sf-menu > li > a {
line-height: 48px;
}
.td-header-style-7 .td-header-sp-logo img {
max-height: 55px;
vertical-align: initial;
top: -5px;
}
.td-header-style-7 #td-top-search {
top: 0;
}
Thanks
