Jump to content

Don

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Don

    how to create a sticky navbar with dropdown

    in CSS

    Posted

    first of all thanks for the answer.
    as i said i tried it and although the navbar sticks to the top, the dropdown effect doesn't work anymore.
    below is my code:
      

    <!DOCTYPE html>
<html lang="en-US">

<head>
	<title>Site title</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="test_style.css">
</head>

<body>

	<div class="topbar">
		<a href="#"><img class="logo" src="logo.png" alt="logo"></a>
		<div class="topphrase">a demo site</div>
	</div>
	
	<ul id="navbar">
		<li><a class="active" href="">Home</a></li>
		<li><a href="">News</a></li>
		<li class="dropdown">
			<a class="dropbtn" href="javascript:void(0)">Products</a>
			<div class="dropdown-content">
				<a href="#">Link 1</a>
				<a href="#">Link 2</a>
				<a href="#">Link 3</a>
			</div>
		</li>
		<li><a href="">About</a></li>
	</ul>
	
<script>
</script>

</body>

</html>

    and the css one:

      

    body {
	font-family: 		arial;
}

.topbar {
	height:			80px;
	background: 	linear-gradient(to bottom right, rgb(200, 200, 200), rgb(100, 100, 100));
}

.logo {
	width:	80px;
	height:	80px;
	float:	left;
}

.topphrase {
	font-family:	courier;
	font-size:		40px;
	color:			rgb(255, 255, 255);
	padding-top:	35px;
	padding-right:	40px;
	float: 			right;
}

ul {
    list-style-type:	none;
	margin:				0;
	padding:			0;
    overflow: 			hidden;
    background-color: 	rgb(100, 100, 100);
}

li {
    float: 	left;
}

li a.active {
	background-color: 	rgb(30, 65, 95);
}

li a, .dropbtn {
    display:			inline-block;
    color:				white;
    text-align:			center;
    padding:			14px 16px;
    text-decoration:	none;
	width:				80px;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color:	rgb(30, 65, 95);
}

.dropdown {
    display:	inline-block;
	position:	relative;
}

.dropdown-content {
    display: 			none;
    position: 			absolute;
    background-color: 	rgb(255, 255, 255);
    width: 				160px;
    box-shadow: 		5px 10px 10px rgba(0,0,0,0.3);
	z-index: 			1;
}

.dropdown-content a {
    color: 				black;
    padding: 			12px 16px;
    text-decoration: 	none;
    display: 			block;
    text-align: 		left;
	width:				128px;
	z-index: 			1;
}

.dropdown-content a:hover {
	background-color: 	rgb(140, 185, 220);
}

.dropdown:hover .dropdown-content {
    display:	block;
}

     

    how to create a sticky navbar with dropdown

    in CSS

    Posted

    i want to create a website with an image on top-left, a text right next to it and below that a navbar with a dropdown list.
    so far i've created that and now i am stuck trying to add the sticky effect to the navbar when i scroll down and navbar reaches top.
    the img and text on top are in a div element (because i wanted to add a background color to them) and the navbar is a list with a dropdown class for some elements.
    i 've tried several things with jss (adding the sticky effect to the navbar when reaching top or adding a hidden navbar which appears when you scroll down and the first one disappears) but the dropdown list won't appear then.
    any suggestions?

    thanks

     

    p.s. i am posting this on css because i think it's a css problem (something with display/position of the elements), but i am not sure.

×
×
  • Create New...