Fixed/top-slide/push menu issues

Resolved trixxd
(@trixxd)

9 years, 6 months ago

Hi Peter,

I’m having trouble getting a fixed/top-slide/push menu to work correctly.

1. I want the menu to appear from below <header> & then push down all content within #pageWrapper.
2. I also want the #click-menu button to stay fixed
3. I don’t want the background of the menu to be 100% the height of the page, I only want it to be 100% of the menu (so it should finish after the search bar appears). The top of #pushWrapper should be visible below this (because it has been pushed down by the menu).

I’ve wrapped the content below <header> within #pushWrapper.
I’ve set ‘Page Wrapper CSS’ to ‘#pushWrapper’, ‘Slide Animation’ to ‘Push’, ‘Slide Side’ to ‘Top’, ‘Menu Width’ to ‘100%’ & ticked the box for ‘Fixed Positioning’.

The Push on #pushWrapper seems to work when ‘Slide Side’ is set to right. But I can’t get the desired effect when ‘Slide Side’ is set to top.

Another things that seems to be going wrong for me when it is set to top.

– #pushWrapper appears below the <header> section on initial page load, as it should be…but when I click the #click-menu button to close the menu, #pushWrapper slides back up into the <header> section. I want #pushWrapper to return to the same position as it was when the page was first loaded.

The site is: http://www.trixxdesigns.com.au

I hope I’ve explained this well enough. If you need any other info from me to get a clearer picture of what I’m trying to achieve, just ask me. I would really appreciate your help.

Thanks,
Tom

https://wordpress.org/plugins/responsive-menu/

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

newbie-newbie
(@newbie-newbie)

9 years, 6 months ago

Hello Peter,

First thank you for building such a stable and beautiful responsive menu. I am so very pleased. I think this is the best responsive menu for WordPress ever. Believe me I have hunted high and low for a responsive menu that is robust and easy to customize. To date your responsive menu design and code brilliance is the best.

My reason for being at this forum is for the same as Tom’s requests namely;

1) When menu expands, it overlays the site header. Is it possible for the menu to open below the site header and thereby not cover the site header?

2) Like Tom, the length of the menu extends to the full length of the webpage. Is it possible for the menu expansion to only extend to the end of the menu items?

I did create a .png to provide a visual sample but I do not think it is possible to upload and share file attachments?

If you are able to fix these two (2) concerns, I would be very grateful.

Many, many thanks.
newbie-newbie

newbie-newbie
(@newbie-newbie)

9 years, 6 months ago

Hi Peter,

A Possible-Part Solution for the menu expansion over the full length of webpage.

Not sure if this is of any value….

Is it possible to add opacity to the expanded menu that is BELOW the last menu item?

This way the website visitor is still able to view the current web page with out the obstruction of the expanded menu and the concern of the menu covering the full web page is no longer such a concern?

Thanks kindly,
newbie-newbie

Thread Starter trixxd
(@trixxd)

9 years, 6 months ago

Also, in regards to my site, #pushWrapper being position: absolute; is causing layout issues to the content within #pushWrapper (it’s child containers are position: relative;).

Setting a width:100% for #pushWrapper seems to fix it. From your knowledge, would you say that is the best method to fix the layout issue across all devices?

P.S. I would like to second what newbie newbie has said about your plugin. It’s one of the best I’ve come across so far in terms of a simple responsive menu. One that I am likely to continue using in all my future WordPress projects should these issues be resolved. I think you’re on to a winner Peter. Good job!
peterfeatherstone
(@peterfeatherstone)

9 years, 6 months ago
Hi guys,

Theres alot of various questions going on here so I will have to take a look at this later tonight when I have some spare time but a few quick pointers until I do from the top of my head:

1 and 3. Add the following to your styles.css file to make the menu start after your header and only up until the search bar:
```
#responsive-menu {
margin-top: 100px !important;
z-index: 1 !important;
height: 250px !important;
}
```
2. As far as I can see the click menu is currently fixed.

newbie-newbie, you could try the z-index above as this may help your overlay issues, but I’d need to look at your site as a seperate example as all are different.

Hope the above helps for now!

Many thanks

Peter
Thread Starter trixxd
(@trixxd)

9 years, 6 months ago

Hi Peter,

Thanks for the quick reply.

You are correct that the menu is currently fixed, I just wanted to ensure whatever solution you might find will keep that in tact.

As for your solution to number 1, it does what you say it would. It still has an issue where it pushes #pushWrapper too far down (& other issues I mentioned above). I’m assuming it has to do with styles applied to either #pushWrapper or .RMPushSlide….but I could be wrong.

But I won’t confuse you further, I will wait until you have had time to have a good look at it.

Thanks again for your help! I really appreciate it.

newbie-newbie
(@newbie-newbie)

9 years, 6 months ago

Hi Peter,

Thank you for listening to us.

Tried your css code and I did add to my customized stylesheet.

The challenge is that I have to place a checkmark for short code (shown in your plugin) to recognize this new .css. And by placing the checkmark for the shortcode, it cancels me from using your plugin’s friendly interface resulting in my whole responsive design to disappear.

Since I cannot provide you with a file attachment in this forum nor a link to my website (it is local on xampp).

Menu drops from top
Menu drops from below sticky header
Menu uses full 100% width of webpage
Menu where there is blank space (after menu items) is turned to an opacity background allowing the end user to see the actual website page through the the menu.

And if “pushwrapper” is the menu, this is what I mean. Truthfully I am absolutely clueless as to what “pushwrapper” really means.

Many thanks.
newbie-newbie

ps: I am on pacific standard time which may explain why I may appear a little slow to respond. However my enthusiasm for your plugin is super high. Thanks again.

peterfeatherstone
(@peterfeatherstone)

9 years, 6 months ago

Hi guys,

Just letting you know I haven’t forgotten about you all!

I have been away for a couple of weeks but I’m back now trying to catch up on all the support requests!

Thanks for your patience

Peter

Thread Starter trixxd
(@trixxd)

9 years, 5 months ago

Thanks Peter, I am really looking forward to your response. Really hoping to get this fixed soon!

peterfeatherstone
(@peterfeatherstone)

9 years, 5 months ago

Hi guys,

The 2.2 version has been released, can you download and let me know if it fixes any of your mentioned issues.

If not, can you list in bullet points the issues you are still facing so I can debug.

Many thanks

Peter
Thread Starter trixxd
(@trixxd)

9 years, 5 months ago
Hi Peter,

I have updated the plugin. Most of the issues above are fine now, but I am having an issue when using a fixed header. I’m not sure if it is the plugin or my code, but I didn’t notice this problem before the plugin update.

It’s only 1 issue, but I have put a couple of scenarios in bullet points to help you.

ISSUE: My fixed header gets pushed to the bottom of the drop-down menu

I want the header & menu fixed at the top of the page with the drop-down starting underneath the header.
- If I remove position:fixed from .site-header, the header correctly stays above the nav menu & the content correctly pushes down…..but then when scrolling down the page, the header isn’t fixed at the top of the page with the nav menu.
- If I remove the div container #pushWrapper, then the header stays in a fixed position…but obviously the content below doesn’t get pushed down.
- When div container #pushWrapper exists, the content gets pushed down correctly…but the header also gets pushed down and stays fixed at the bottom of the menu
Hopefully those points will help you out.

Please have a look at the site and see for yourself

Your help is greatly appreciated!

Tom
Thread Starter trixxd
(@trixxd)

9 years, 5 months ago

Hi Peter,

Any update on what I might be doing wrong?

Maybe I’ve misinterpreted some of your instructions and that’s what is causing the header to be pushed down?

Thanks again in advance.
Thread Starter trixxd
(@trixxd)

9 years, 4 months ago
Hi Peter,

I have played around with the code a bit more & might be on the right track to help fix this issue.

On clicking the menu button, your plugin injects the class .RMPushSlide & an inline style of margin: 250px; into the #pushWrapper <div> (note: the px value of the margin always matches the height value I set for #responsive-menu in my CSS)

By overruling that margin with the following code added to my CSS file, the header once again remains fixed above the menu when the menu button is clicked:
```
.RMPushSlide {
    margin-top: 0px !important;
    padding-top: 250px;
}
```
However, this causes the menu drop-down animation & the push down of the content in #pageWrapper to be greatly out of sync.

Please Peter, I really need some assistance on getting this working properly.

PS. I have tried syncing them by changing the animation speed in the plugin page settings, but the closest I can get is setting it to 0.1 seconds and that just looks absolutely ridiculous.
peterfeatherstone
(@peterfeatherstone)

9 years, 4 months ago
Hi Trixx,

I’m so sorry that I haven’t been able to attend to your request, I think I am going to have to work on how the animation syncing works, because it turns out when people start to make customisations outside of the scope of the plugin the Push animation starts to break.

I have played around with a few CSS things and found adding the following helps to smooth out the down animation at least but not the up:
```
#pageWrapper {
    transition: all 0.6s linear;
}
```
It’s still not ideal as it doesn’t seem to transition back at all. I will keep playing around with it and figure out a better way to do the animations (however I will be the first to admit that my JavaScript knowledge is not the best).

Many thanks

Peter
Thread Starter trixxd
(@trixxd)

9 years, 4 months ago

Hi Peter,

I appreciate you getting back to me. Don’t worry, I understand you have a life outside of your plugin, so I’m not expecting you to devote all your time to this.

I added your code above to #pushWrapper and it does make a difference on the down animation. It is a shame it doesn’t carry through on the up animation as simply as that (esp being that it is still #pushWrapper that is being animated on the way back up).

For this particular project, I am probably going to settle for the overlay option for the time being.

But I would really appreciate it if you could let me know as soon as you have a solution for this issue, as I’d like to continue using your plugin for most of my future WordPress projects.

Thanks again!

whitsticks21
(@whitsticks21)

9 years, 1 month ago

Hello,

I’m wondering if this ever got resolved. I would like to style the menu in the same manner as trixxd.

Thanks!

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

The topic ‘Fixed/top-slide/push menu issues’ is closed to new replies.