cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution

Escapade child theme Menu Not Scroll-able

Hi,

I am using the Escapade child theme (primer is the parent theme )

The mast head (menu) does not scroll with the page , how can i make the menu scroll with the page ?

1 ACCEPTED SOLUTION
New

As others said, use the custom CSS

 

This worked ...  sorta kinda

 

.side-masthead {
height: 100vh;      /* 100% of view height */
overflow: scroll;

}

 

but the fly-out sub-menu  items stopped working. Any ideas?

View solution in original post

8 REPLIES 8
Super User II

@soup4ever

 

If the theme does not come with a sticky menu it would require an experienced WordPress developer to customize your theme and to add that functionality for you.

 

The good news are there are plugins that may help you out in the WordPress Plugin Repository.

 

HTH! 😉

Judith
"No pressure, no diamonds." Thomas Carlyle

Helper VI

@soup4ever you can use the custom CSS function in the customizer.

Go to you Appearance > Themes and then, you click on customize in your current theme (escapade). Once it loads the customizer, you will see an option that says "Custom CSS" or "Aditional CSS" or something like that, it's the option at the bottom.

Then, you should define your CSS rules.

From what you say, think the rules you need are:

.side-masthead {
    position: absolute;
    padding: 0 35px;
    margin: 0 0 0 -250px;
}

Hope it helps!

If you find my replies helpful, give me a like or kudo 🙂
And if I solved your issue, mark it as solution 😄


@jpablo wrote:

@soup4ever you can use the custom CSS function in the customizer.

Go to you Appearance > Themes and then, you click on customize in your current theme (escapade). Once it loads the customizer, you will see an option that says "Custom CSS" or "Aditional CSS" or something like that, it's the option at the bottom.

Then, you should define your CSS rules.

From what you say, think the rules you need are:

.side-masthead {
    position: absolute;
    padding: 0 35px;
    margin: 0 0 0 -250px;
}

Hope it helps!


Hi JPablo

you code works but the content is way to the right .

here is the site in question https://goo.gl/qmgwYL

 

ps: I have removed the code for now 

@soup4ever it's nice to hear that my code worked for you, at least partly. However, can you activate the code, take a screenshot and then post the screenshot so I can see? Because it depends on screen resolutions.

You can deactivate the rules after you take the screenshot, if you want.

 

We are one step closer to make it work 🙂

If you find my replies helpful, give me a like or kudo 🙂
And if I solved your issue, mark it as solution 😄


@jpablo wrote:

@soup4ever it's nice to hear that my code worked for you, at least partly. However, can you activate the code, take a screenshot and then post the screenshot so I can see? Because it depends on screen resolutions.

You can deactivate the rules after you take the screenshot, if you want.

 

We are one step closer to make it work 🙂


Ok the code is activated now 

@soup4ever can you post a screenshot so I can see how you see it?

Because in my computer it looks fine. Maybe you have a higher resolution than my screen has.

If you find my replies helpful, give me a like or kudo 🙂
And if I solved your issue, mark it as solution 😄
New

As others said, use the custom CSS

 

This worked ...  sorta kinda

 

.side-masthead {
height: 100vh;      /* 100% of view height */
overflow: scroll;

}

 

but the fly-out sub-menu  items stopped working. Any ideas?

View solution in original post

This worked,

Thanks