How to solve Navbar overlap with body content or other page in CSS

Azim Azman

I have made a navigation bar with CSS and JS. The picture below show my example of nav bar My Example JS

The problem is, when i choose type "MY ACCOUNT" it will display some content. Then if i hover mouse on "Value Graph" it give me result of overlapping with body content of My Account. Here is the problem.

My Problem Navbar

Here is my CSS For Navbar

@import url(http://fonts.googleapis.com/css?
family=Open+Sans:400italic,400,300,600);

@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* minimal styles for that navi */
.rmm {margin: 0 auto;}
.rmm ul {margin: 0; padding:0; list-style: none; position: relative; 
background: #000;}
.rmm ul:after {content: ""; clear: both; display: block;}
.rmm ul li {float: left;}
.rmm ul li:hover {background: #202020;}
.rmm ul li:hover > ul {display: block;}
.rmm ul li:hover a{color: #fff;}
.rmm ul li a {color: #fff; display: block; text-decoration: none;}
.rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 
100%;}
.rmm ul ul li {float: none; position: relative;}
.rmm ul ul li a{color: #fff;}
.rmm ul ul li a:hover {background: #202020;}
.rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;}

/* mobile menu header button */
.rmm-toggled {width: 100%; background-color: #555555; min-height: 50px; 
margin: 0 auto; display: none;}
.rmm-closed ~ .rmm-mobile {display: none!important;}
.rmm-toggled-controls{width: 100%;}
.rmm-toggled-title{width: 60%; float: left; font-size: 27px; color: #fff; 
font-weight:600; display: block; padding: 8px 0; text-decoration: none; 
text-transform: uppercase; text-align: left; padding-left: 35px;}
.rmm-toggled-button{width: 20%; float: left; margin-top: 3px;
 display:block;
width: 32px;
padding:0 !important;
margin:10px 10px 0 0;
border:1px solid #fff;
border-radius:3px;
float: right;
}
.rmm-toggled-button span{float: left; display:block; margin: 3px 6px; 
height: 3px; background:white; width:20px;}

/* normalny back button visible only on mobiles  */
.rmm .rmm-back{display: none; font-size: 12px;}
.rmm .rmm-back:after {display: none;}
.rmm .rmm-back a:after {
font-family: 'icomoon';
speak: none;
-webkit-font-smoothing: antialiased;
content: "\e000";
 position: relative;
display: inline-block;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
top: 1px;
 right: -2px ;
float: left;
font-size: 10px;
}
.rmm-mobile .rmm-back{display: block;}

  /* mobile menu list */
  .rmm-mobile{width: 100%;}
  .rmm-mobile .rmm-dropdown:hover ~ ul, .rmm-mobile .rmm-dropdown:hover > ul 
  ,.rmm-mobile .rmm-dropdown:hover + ul {display: none!important;}
   .rmm-mobile ul{width: 100%; position: inherit!important;}
   .rmm-mobile li{width: 100%; }

   /* mobile menu js action */
  .rmm-dropdown{display: block!important;}
  .rmm-mobile .rmm-subview{display: block!important; width: 100%;}
  .rmm-mobile .rmm-subover-hidden{display: none!important;}
  .rmm-mobile .rmm-subover-visible{display: block;}
  .rmm-mobile .rmm-subover-header{display: none!important; padding: 0; 
   margin:0;}

  /* mobile menu content */
  .rmm-mobile .rmm-submenu{position: relative; left: 0px;}

  .rmm .rmm-mobile li:hover > ul {display: none;}

  /* arrow down for wide screen */
  .rmm.style {text-align: left; font-family: Tahoma;}
  .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
   background:#990; 
   text-transform: uppercase; display: inline-table; text-align:left;}
  .rmm.style ul li {text-align:left;}
  .rmm.style ul li:hover {background: #4b545f;}
  .rmm.style ul ul {display: none; margin:0; background: #5f6975; border-
   radius: 0px; padding: 0; position: absolute;}
  .rmm.style ul li a {color: #fff; font-weight:600; display: block; padding: 
   15px 35px; text-decoration: none; font-weight:600; }
  .rmm.style ul ul li {border-bottom: 1px solid #575F6A; border-top: 1px 
   solid #6B727C;}
  .rmm.style ul ul li a {padding: 12px 35px; color: #fff; }
  .rmm.style ul ul li a:hover {background: #4b545f;}

   /* arrow down for wide screen */
   .rmm.style ul li > a:not(:only-child):after {
   font-family: 'icomoon';
   speak: none;
  -webkit-font-smoothing: antialiased;
   content: "\e000";
   position: relative;
   display: inline-block;
   -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    top: -4px;
    left: 1px;
    font-size: 10px;
   }

   /* arrow left for wide screen submenus  */
   .rmm.style ul ul li > a:not(:only-child):after {-webkit-transform: 
    rotate(120deg)!important; transform: rotate(120deg)!important; top: 2px; 
   font-size: 14px; float: right; margin-right: -20px;}

    /* mobile style */
   .rmm.style .rmm-mobile li > a:not(:only-child):after {-webkit-transform: 
     rotate(120deg)!important; transform: rotate(120deg)!important; top: 
     4px!important; font-size: 14px!important; float: right; margin-right: 
    -20px;}
    .rmm.style .rmm-mobile li{background: #3ab4a6; border-bottom: 1px solid 
    #575f6a!important; border-top: 0!important; }

Thanks in advance!

Azim Azman

I have added z-index on my css. Here is the answer:

/* arrow down for wide screen */

.rmm.style {text-align:center; font-family: Tahoma; }
.rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); background-color: #F8F8F8; 
text-transform: uppercase; display: inline-table; text-
align:left; z-index: 1; }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Force navbar to not overlap content on in-page navigation

From Dev

How to make Toolbar not overlap other content in Android?

From Dev

how to make layers not overlap with each other in css

From Java

How to dynamically change css content for navbar links

From Dev

How to overlap various content?

From Dev

How to achieve content overlap when expanding (collapsing) menu with navbar-static-top (similar to navbar-fixed-top behavior)

From Dev

How to align elements so CSS fixed doesnt overlap on page load

From Dev

Navbar on left of page, how to let content resize to match screen size?

From Dev

CSS: How can handle height of 2 <div> be same with other when they are side by side, in situation that content of page will change after load page

From Dev

navbar overflows (x) page content

From Dev

Dompdf default page header content overlap

From Dev

CSS How to add content under fixed position navbar

From Dev

How to get the body content from a PHP-generated HTML page?

From Dev

How to print the body content of a html page using sed

From Dev

How do you view other page content without, opening a page

From Dev

how to overlap sections in html body while scrolling?

From Dev

Body background overlap with modal window how to tackle this?

From Dev

Durandal & IE: How to prevent body's scrollbar overlaying the "page-host" area and the navbar

From Dev

How to overlap 2 charaters with CSS

From Dev

How to set css class to body before page load in MVC 5?

From Dev

How to use body_class to change css according to page hierarchy

From Dev

How to bind the content of the buttons with list of values in other xaml page?

From Dev

How to add content of div with certain class to other page?

From Dev

Upon falling, navbar goes under the content of the page

From Dev

How to make an transparent element overlap other elements?

From Dev

How to make an transparent element overlap other elements?

From Dev

How to fix two label overlap each other

From Dev

Getting a footer to stay at bottom of WINDOW (not page) & not overlap content

From Dev

Getting a footer to stay at bottom of WINDOW (not page) & not overlap content

Related Related

  1. 1

    Force navbar to not overlap content on in-page navigation

  2. 2

    How to make Toolbar not overlap other content in Android?

  3. 3

    how to make layers not overlap with each other in css

  4. 4

    How to dynamically change css content for navbar links

  5. 5

    How to overlap various content?

  6. 6

    How to achieve content overlap when expanding (collapsing) menu with navbar-static-top (similar to navbar-fixed-top behavior)

  7. 7

    How to align elements so CSS fixed doesnt overlap on page load

  8. 8

    Navbar on left of page, how to let content resize to match screen size?

  9. 9

    CSS: How can handle height of 2 <div> be same with other when they are side by side, in situation that content of page will change after load page

  10. 10

    navbar overflows (x) page content

  11. 11

    Dompdf default page header content overlap

  12. 12

    CSS How to add content under fixed position navbar

  13. 13

    How to get the body content from a PHP-generated HTML page?

  14. 14

    How to print the body content of a html page using sed

  15. 15

    How do you view other page content without, opening a page

  16. 16

    how to overlap sections in html body while scrolling?

  17. 17

    Body background overlap with modal window how to tackle this?

  18. 18

    Durandal & IE: How to prevent body's scrollbar overlaying the "page-host" area and the navbar

  19. 19

    How to overlap 2 charaters with CSS

  20. 20

    How to set css class to body before page load in MVC 5?

  21. 21

    How to use body_class to change css according to page hierarchy

  22. 22

    How to bind the content of the buttons with list of values in other xaml page?

  23. 23

    How to add content of div with certain class to other page?

  24. 24

    Upon falling, navbar goes under the content of the page

  25. 25

    How to make an transparent element overlap other elements?

  26. 26

    How to make an transparent element overlap other elements?

  27. 27

    How to fix two label overlap each other

  28. 28

    Getting a footer to stay at bottom of WINDOW (not page) & not overlap content

  29. 29

    Getting a footer to stay at bottom of WINDOW (not page) & not overlap content

HotTag

Archive