Jump to content

how to create a sticky navbar with dropdown


Don
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

guys one last question:
it seems a lot easier to add to the ul:

top: 0;
position: sticky;

rather than the jss way (adding the .sticky class to the navbar when it reaches top etc)

is there a general reason for avoiding the position: sticky method?

Link to comment
Share on other sites

There is no reason to avoid the CSS solution. The only reason Javascript solutions exist is because they were created back when CSS did not have this option.

Just a note: Safari is outdated and only supports sticky position with the -webkit- prefix. You should have both declarations whenever you want something to be sticky:
 

.element {
  position: -webkit-sticky;
  position: sticky;
}

 

Link to comment
Share on other sites

I think it is to early to use position: sticky; as some mobile browsers still don't support it fully, and there are some known issues where only the main modern browsers that have only just began to support it, still have some oddities when using this. Until it has become more established i should avoid it for now.

Link to comment
Share on other sites

  • Funce locked this topic
Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...