5 replies [Last post]
Ram
Ram's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT+5.5
Joined: 2014-08-19
Posts: 3
Points: 4

Hi,
I have created a navigation menu.My code is here.The problem is when i resize the browser window the menus get overlapped.I used min-width and max-width property.But no use.I'm new to css. When i google it i found of using media elements,i tried.But no luck.I think i'm not using it in the appropriate place.Can anyone suggest me how to fix it?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Not easily usable

Your source is not usable without a bunch of messing around. Please post it directly to a comment, between [code] and [/code] tags.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ram
Ram's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT+5.5
Joined: 2014-08-19
Posts: 3
Points: 4

My HTML code is as

My HTML code is as follows

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
 
<body>
<nav id="rolling-nav">
    <ul >
        <li><a href="#" data-clone="Home">Home</a></li>
        <li><a href="#" data-clone="Services">Services</a></li>
  </ul>
</nav>
  </body>
</html>

My CSS Code
body {
  background-color:#ffffff;
  margin:0px 0px;
  padding: 100px 0px 100px 0px;
   background-size: cover;
    -webkit-backface-visiblity: visible !important;
}
 
#rolling-nav {
    background: -webkit-linear-gradient(top, #14b9ef 0%,#054573 100%)repeat;
	background: -o-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Opera 11.10+ */
	background: linear-gradient(to bottom, #14b9ef 0%,#054573 100%); /* W3C */
    background: -ms-linear-gradient(top, #14b9ef 0%,#054573 100%); /* IE10+ */
 
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#14b9ef,EndColorStr=#054573);
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#14b9ef,EndColorStr=#054573);
	/*background-image: -ms-linear-gradient(left, #14b9ef, #054573);*/
 
    min-width:100%;
	background-size: cover;
    margin-top:-100px;
    list-style: none;
    height: 50px;
    overflow: visible;
	font-family: "Proxima N W01 Reg It","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
  	font-weight: 500;
	font-size: 14px;
	color: #fff;
 
	}
 
 
#rolling-nav ul 
{
  height:50px;
  margin-top:0;
  margin-left:594px;
  padding:0px 0px;
  overflow:hidden;
 
 
}
 
#rolling-nav li
{
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
 
}
 
#rolling-nav a,
#rolling-nav a:before
 {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background: -webkit-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #14b9ef 0%,#054573 100%); /* IE10+ */
  background: linear-gradient(to bottom, #14b9ef 0%,#054573 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14b9ef', endColorstr='#054573',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
 
}
 
#rolling-nav a:before
 {
  content:attr(data-clone);
  position:absolute;
  top:100%;
  right:0px;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
 
}
 
#rolling-nav a:hover 
{
  margin-top:-50px;
  margin-bottom:1px;
 
}

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 29 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Z-index

May Be you need to google the property "Z-index" . It might be useful . and apply it to your navigation bar . See if it works .

All The best .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Not sure what you mean by 'overlap'

As is, the menu disappears off the right side when width is reduced. Is that what you refer to?

If so, do this:

#rolling-nav ul {
  display: table;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  }

If you mean something else, be more specific.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ram
Ram's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT+5.5
Joined: 2014-08-19
Posts: 3
Points: 4

The right side menu disappears when browser width reduced

Yes,you are right. Now i changed the navigation menu coding like this.When i try your code the menu went to left side ,i'm facing the same issue.

My css Code

#rolling-nav {
    background: -webkit-linear-gradient(top, #14b9ef 0%,#054573 100%)repeat;
	background: -o-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Opera 11.10+ */
	background: linear-gradient(to bottom, #14b9ef 0%,#054573 100%); /* W3C */
    background: -ms-linear-gradient(top, #14b9ef 0%,#054573 100%); /* IE10+ */
 
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#14b9ef,EndColorStr=#054573);
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#14b9ef,EndColorStr=#054573);
	/*background-image: -ms-linear-gradient(left, #14b9ef, #054573);*/
 
    width:100%;
	background-size: cover;
    margin-top:-100px;
    list-style: none;
    height: 50px;
    overflow: visible;
	font-family: "Proxima N W01 Reg It","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
  	font-weight: 500;
	font-size: 14px;
	color: #fff;
 
	}
 
#rolling-nav ul 
{
  height:50px;
  margin-top:0;
  margin-left:inherit;
  float:right;
  padding:0px 0px;
  overflow:hidden;
 
 
}
 
#rolling-nav li
{
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
 
}
 
#rolling-nav a,
#rolling-nav a:before
 {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background: -webkit-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #14b9ef 0%,#054573 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #14b9ef 0%,#054573 100%); /* IE10+ */
  background: linear-gradient(to bottom, #14b9ef 0%,#054573 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14b9ef', endColorstr='#054573',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
 
}
 
#rolling-nav a:before
 {
  content:attr(data-clone);
  position:absolute;
  top:100%;
  right:0px;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
 
}
 
#rolling-nav a:hover 
{
  margin-top:-50px;
  margin-bottom:1px;
 
}