How to prevent content from being pushed down on appearance of floating menu in mobile display


Tags: css,menu,floating

Problem :

Issue: Upon appearance of floating menu in mobile browsers, a large chunk of content is pushed down leaving white space upon the first appearance of the floating menu.

Go to deleted in a mobile browser or using the usual developer's mobile emnulator to see the issue. Scroll down and when the menu floats, the content is pushed down leaving a large white space.

How can I fix this? Looking for help from the CSS ninjas. Thank you :)

Edit: this issue arises with using WP plugin myStickymenu on mobile browsers. The answer has been indicated below, thanks for the help everyone.



Solution :

If you add a max-height of 61px (the height of your sticky wrap) to mysticky-wrap, it should fix the problem.

#mysticky-wrap {
   max-height: 61px !important;
}

    CSS Howto..

    How do I use this CSS animation in my HTML file?

    how to read content in a webpage that doesn't appear in page source

    How do I make two arrows in css

    How to design a CSS for a centered floating confirm dialog?

    How to move the search text box to the extreme right and Categories drop down to the left in html

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How to position a background image like wanderfly.com?

    How to inject content of CSS file into HTML in Gulp? [closed]

    How can i see or how do i know where to put the control according to the screen when using css?

    how to make certain css 3d effect works in IE

    Show 1 row on desktop and 2 rows on mobile

    How to use sprite images in html/css and toggle change with jQuery

    How to add left border with image(s) dynamically

    how to order CSS elements?

    How to override a property set in an id (CSS)

    Css When having 2 bg-image, how to have 1 to extend out of the grid

    How to style this value with jQuery

    How to get CSS or XPath locator from a button class

    How to create a
      with a triangle for the :active row?

    How to add a css on a div by finding a children class on its sibling div by jquery

    CSS - how to make content fit to the width/height of paragraph?

    Hide/Show Load function now working

    How to prevent rendering css when loading stylesheet from local storage?

    CSS Bootstrap AngularJS - How to reduce table row height?

    How do I get the name of div a user must click to appear in a text div?

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How to create DropDown MenuBar using CSS

    How to Add flexibility to SASS for another color

    how to reference elements in CSS or JS files for fastest parsing?

    How to draw a line from the middle of the page to the right side?