Need to keep a small menu on a page with PHP action hook or CSS

This topic has 6 replies, 3 voices, and was last updated 9 years by Radu.

Author
January 4, 2017 at 05:57 #148663

arbolife
Participant

Hi,

I have a sticky menu that starts large and reduces after scrolling down.

Now I have one page where I can’t have this behaviour and I need the menu to load in the smaller version and don’t change size. It needs to be sticky, but fixed height.

I could approach this either in PHP or CSS. Can you please point to how I would get this done ?

Thanks,

Marc

January 5, 2017 at 02:26 #148808

Laura
Moderator

Hello, maybe with css, can you send me a link to the page?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

January 5, 2017 at 04:43 #148843

arbolife
Participant

Hi Laura,

Thanks for looking into it, here’s a test page that has this feature: http://ww2.arbolife.com/listing/restaurant/

I’m creating a plugin to use GeoDirectory’s Supreme Directory child theme on top of kleo. So I’m recreating something like this: https://wpgeo.directory/supreme-directory/places/restaurants/

On all other pages, the menu can reduce when scrolled, but here there is no scrolling so I want to hard code it to be narrow.

Best,
Marc

January 5, 2017 at 23:17 #148982

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
January 6, 2017 at 18:18 #149090

Radu
Moderator
Hi,

Kleo theme adds header-scrolled class when the scroll it’s performed in page but in this case the scroll it’s happens in a certain div not for body of the page, I hope it makes sense.

You can try to decrease the menu height using this
COPY CODE
```
@media(min-width:992px){
.post-type-archive-gd_place #header .kleo-main-header .navbar-header,.post-type-archive-gd_place #header .kleo-main-header .header-banner, .post-type-archive-gd_place #header .kleo-main-header .primary-menu, .post-type-archive-gd_place #header .kleo-main-header .secondary-menu{
    line-height:70px !important; height:70px !important;
}
}
```
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
January 9, 2017 at 03:01 #149222

arbolife
Participant

Hi Radu,

Thank you, this worked perfectly well.

Cheers,
Marc

January 9, 2017 at 21:52 #149314

Radu
Moderator

Great

You’re welcome

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Author

Posts