Jump to content

Don

Members
  • Content Count

    6
  • Joined

  • Last visited

Posts posted by Don

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

     

  2. 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...