Jump to content

how to create a sticky navbar with dropdown


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 post
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 post
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 post
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 post
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 post
Share on other sites
  • 2 years later...

Hi, guys!

I have the same problem here. 

But, I add the position: sticky lately, but still didn't working. 

Here's the code for HTML : 
 

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome To My Profile</title>
        <link rel="stylesheet" href="assets/style-main-page.css">
        <link rel="shortcut icon" href="assets/image/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <header>
            <div class="banner">
                <h1>My Profile</h1>
                <marquee>Terima kasih telah mampir. Silahkan untuk lihat-lihat! Gratis kok :D </marquee>
            </div>
            <div class="nav-menu">
                <nav>
                    <ul>
                        <li><a href="#"></a>Home</li>
                        <li class="dropdown-menu"><a href="#">Tentang Saya</a>
                            <ul class="sub-menu">
                                <li><a href="#biodata">Biodata</a></li>
                                <li><a href="#kota-asal">Kota Asal</a></li>
                                <li><a href="#hobi">Hobi</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
 
        <main>
            <div id="isi-profil">
                <article id="biodata" class="card">
                    <h2 id="biodata">Biodata Lengkap</h2>
                    <img src="assets/image/teknik_informatika.jpg" class="featured-image" alt="biodata">
                    <p>Perkenalkan nama lengkap saya adalah Reyta Bonita. Lahir di Cirebon, 6 Maret 1995. Saya lulusan Teknik Informatika Universitas Muhammadiyah Cirebon.</p>
                    <p>Pastinya langsung bilang 'kan kalau saya jago ngoding? Tidak semudah itu Ferguso! Karena saya sejujurnya nggak suka ngotak ngatik coding :'D . Ini fakta kok. Tapi kenapa sekarang mau belajar coding lagi?</p>
                    <p>Jawabannya simpel, saya merasa tidak mempunyai skill yang mumpuni untuk dijual atau dipergunakan sebagaimana mestinya. Dan yang jelas saya juga malu, karena jurusan kuliah sudah IT tapi kemampuan cuma mentok sebatas paham coding dari kulit luarnya saja.</p>
                    <p>Meski begitu saya selalu menganggap diri ini newbie, jadi tolong jangan hakimi saya :'(( hehehehe. Lah kok jadi curhat :'D </p>
                </article>
                <article id="kota-asal" class="card">
                    <h2 id="kota-asal">Kota Asal</h2>
                    <img src="assets/image/pemkab_cirebon.jpg" class="featured-image" alt="kota-asal">
                    <p>Saya tinggal lebih tepatnya di wilayah Kabupaten Cirebon. Ya, Cirebon itu wilayah administrasinya dibagi menjadi dua, yakni : Kota Cirebon dan Kabupaten Cirebon.</p>
                    <p>Mengutip dari Wikipedia, Kabupaten Cirebon adalah sebuah kabupaten di Provinsi Jawa Barat yang terletak di bagian timur, dan merupakan batas, sekaligus sebagai pintu gerbang Provinsi Jawa Barat. Ibu Kotanya adalah Kota Sumber.</p>
                </article>
                <article id="hobi" class="card">
                    <h2 id="hobi">Hobi</h2>
                    <img src="assets/image/hobi.jpg" class="featured-image" alt="hobi">
                    <p>Saya punya beberapa hobi yang memang sudah digeluti sejak lama, salah satunya adalah membaca. Ya, genre buku yang saya baca adalah misteri, horror, aksi, motivasi, daaaaann sedikit-sedikit juga baca yang berbau romance.</p>
                    <p>Tapi semenjak diberlakukan gerakan #dirumahaja, saya mulai merambah hobi untuk mempelajari bahasa asing baru. Yang jadi fokus saya sekarang adalah belajar Bahasa Belanda dan Bahasa Jepang.</p>
                    <p>Kalau ngoding gimana? Hehehe, makin kepo sih sejujurnya. Karena saya sudah 1 tahun belum kerja kantoran lagi. Jadi aktifitas saya nggak banyak, sehingga saya memutuskan untuk mempelajari banyak hal baru dari rumah.</p>
                    <p>Mau tahu nggak, pengarang buku favorit saya? Cek di bawah ini yuk!</p>
 
                    <section>
                        <h3>Akiyoshi Rikako</h3>
                        <img src="assets/image/akiyoshi-rikako.jpg" class="featured-image" alt="akiyoshi-rikako">
                        <p>Ya, inilah ratu genre horror dan misteri favorit saya. Judul buku karangannya yang masih menjadi favorit saya dan sudah berkali-kali dibaca adalah Holy Mother.</p>
                        <p>Akiyoshi Rikako-sensei ini paling jago buat jalan cerita yang sungguh-sungguh nggak pernah kepikiran dan logika saya juga jujur agak susah buat meraba-raba akhir dari tiap cerita yang beliau buat.</p>
                    </section>
                    <section>
                        <h3>Ilana Tan</h3>
                        <img src="assets/image/ilana-tan.jpg" class="featured-image" alt="ilana-tan">
                        <p>Pengarang buku yang punya plot cerita unik dan harus baca bukunya secara berkelanjutan, karena kalau nggak, pastinya nggak akan ngerti jalan ceritanya.</p>
                        <p>Beliau lebih banyak di genre yang sedikit melow dan juga romansa-romansa.</p>
                    </section>
                    <section>
                        <h3>Asma Nadia</h3>
                        <img src="assets/image/asma-nadia.jpg" class="featured-image" alt="asma-nadia">
                        <p>Pengarang buku paling fenomenal ini pastinya sudah pada tahu 'kan? Ya, beliau adalah yang bukunya paling banyak diadaptasi ke film. Dan bukunya beliau yang paling saya sukai adalah 'Assalammualaikum, Beijing!'</p>
                    </section>
                    <section>
                        <h3>Ahmad Rifai Rif'an</h3>
                        <img src="assets/image/ahmad-rifai-rifan.jpg" class="featured-image" alt="ahmad-rifai-rifan">
                        <p>Kalau yang ini adalah penulis buku motivasi paling favorit dan tiap buku-bukunya itu seakan punya energi untuk membuat kita jadi lebih baik.</p>
                        <p>Buku karangannya yang paling favorit adalah 'Man Shabara Zhafira' dan 'Perfect Muslimah'</p>
                    </section>
                </article>
            </div>
        <aside>
            <article class="profile card">
                <header>
                    <h2>Tentang Author</h2>
                    <h3>Reyta Bonita</h3>
                    <figure>
                        <img src="assets/image/author.jpg">
                    </figure>
                </header>
                <section>
                    <h3>Selengkapnya</h3>
                    <table>
                        <tr>
                            <th>Tanggal Lahir</th>
                            <td>6 Maret 1995</td>
                        </tr>
                        <tr>
                            <th>Alamat</th>
                            <td>Kabupaten Cirebon</td>
                        </tr>
                        <tr>
                            <th>Alamat Email</th>
                            <td>reytarere@gmail.com</td>
                        </tr>
                        <tr>
                            <th>HP/WA</th>
                            <td>+6281283010700</td>
                        </tr>
                    </table>
                </section>
            </article>
        </aside>
        </main>
        <footer>
            <p>Tugas Pemrograman Web Dasar Dicoding &#169; 2020 - Dicoding Academy</p>
        </footer>
        
    </body>
</html>
 
 
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...