I am trying to make a responsive menu bar and when the width is under 550px for example, the menu items overlay with the divs that are following next. What am I doing wrong?
In the CSS I tried to make the list position relative, but the same result.
HTML Code:
<div id="navbar">
<h2>Aripile Zarandului</h2>
<ul id="ulNav">
<li class="current">Acasă</li>
<li>Despre noi</li>
<li>Fotografii</li>
<li>Login</li>
<li>Contactează-ne</li>
</ul>
</div>
CSS Code:
#ulNav li{
list-style-type:none;
display:inline;
padding-left:10px;
padding-right:10px;
line-height:3em;
display:inline-block;
}
#ulNav li:hover{
background-color:#2980b9;
}
#ulNav li a{
text-decoration:none;
color:white;
font-size:1em;
display:block;
}
/* Responsiveness */
#media screen and (max-width: 650px) {
#ulNav li {
display:block;
text-align:center;
position:relative;
}
#ulNav{
float:none;
}
}
Screenshot
Related
Thank you to everyone who have been helping me with my first project.
I have managed to make this responsive nav bar
1.However when the mobile menu is active the "burger" button is stuck to the left and small.
I have tried to make sub menus but had no success.
3.I have a logo i would like on the same line as the navigation menu but when the media is on a mobile devise (480px) I'm trying to have the logo on the top and center and the naviagtion on the line below.
any help will be great. Thank you in advance.
this is the link to my jsfiddle
https://jsfiddle.net/jkfb4Lus/
<body>
<div id="container">
<header id="header">
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>About</li>
<li>Writings</li>
<li>Extra</li>
<li>Contact Us</li>
<li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</body>
body{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
#header{
width:100%;
height:65px;
background-color:white;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
width:100%;
height:65px;
float:right;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
text-align:right;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
display:inline;
}
/*float the LIST (li) items side by side HOVER*/
ul.topnav li:hover{
border-bottom:;
}
/*style the (a)links inside the LI items*/
ul.topnav li a{
position:relative;
display:inline-block; /* so it accepts top/bottom padding */
text-decoration:none;
padding:px;
color:#FFF;
font-weight:500;
width:75px;
text-align:center;
line-height:65px;
width:100px;
}
/*change backround color of the LINKS (a) on hover*/
ul.topnav li a:hover{
background-color:#F1CBFF;
color:purple;
transition:background-color 1.0s ease;
}
/*hide the list (li) items that contains the link that
should open and close-quotethe topnav on small screens*/
ul.topnav li.icon{
display:none;
}
/*when the screen is less than 680px hide,hide all list (li)items,
except the first one("Home"). Show the list(li) item that contains
the link (a) open and close the topnav (li.icon)*/
#media screen and (max-width:680px){
#header{
height:auto;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
height:auto;
}
ul.topnav li:not(:first-child){
display:none;
}
ul.topnav li.icon{
float:right;
display:inline-block;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
float:left;
}
}
/*the "responsive" class is added to the topnav with Javascript when the uses
clicks on the (icon). This class makes the topnav look good on small screens*/
#media screen and (max-width:680px){
ul.topnav.responsive {
position:relative;
}
ul.topnav.responsive li.icon{
position:absolute;
right:0;
top:0;
}
ul.topnav.responsive li {
float:none;
display:inline;
}
ul.topnav.responsive li a{
width:100%;
display:block;
text-align:center;
padding:10px;
}
ul.topnav li a:hover{
border-bottom:1px purple solid;
transition:all 1.0s ease;
}
}
Have you tried using flexbox?
ul.topnav.responsive li.icon{
display: flex;
align-items: center;
}
I made a nav for mobile view only and noticed that it still stays in desktop view despite it only being with the mobile media queries css. The nav is a div right by the menu div which both are in the main nav of the website in the html.How can i make sure the nav and it's content only stay in mobile view and not include desktop view?
jsfiddle - http://jsfiddle.net/LpbL6vj2/
<aside class="sidebar">
<nav>
<div class="menu"></div>
<div class="mobile-header">Taffies Cupcakes</div>
<ul class="main_nav">
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav> <!-- end of nav -->
<div class="company_info">
<p>Taffies cupcakes</p>
<p>111 x drive road</p>
<p>milton keynes</p>
<p>l0002</p><br>
<p>telephone: 078 878-8888</p>
</div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
#media screen and (max-width:640px){
.container{
width:100%;
}
.sidebar{
width:100%;
margin:0;
}
.main_nav{
display:none;
}
.company_info{
display:none;
}
.first_article{
width:90%;
margin-top:50px;
}
footer p{
display:none;
}
.about_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.orders_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.contact_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.gallery_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.menu:before{
content:"Menu";
}
.menu{
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:8px;
padding-right:0px;
padding-top:10px;
padding-bottom:8px;
background-color: #CBAFA2;
cursor:pointer;
width:30%;
text-align:center;
float:left;
}
header{
display:none;
}
.mobile-header{
width:62%;
padding:10px;
font-family:georgia;
font-weight:bold;
font-size:20px;
background-color:#3d2316;
float:left;
}
}
You need to add a non-media-query rule to hide the nav. Something like:
.sidebar nav {
display: none;
}
#media (max-width: 640px) {
.sidebar nav {
display: block;
}
}
So while the window is narrow, the media query rules apply. When the window is wide, the normal rules apply.
I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I'am trying to create a navigation menu with a sub menu, and fiddled with it today.
But i'am stuck at getting the sub menu of the parent menu to align it's links.
my HTML
<!-- navigation menu -->
<div class="MenuContainer">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="sub">
<li>Project1</li>
<li>Project2</li>
<li>Project3</li>
</ul>
</li>
</ul>
</div>
my CSS
.MenuContainer {
width:100%;
height:50px;
border:1px solid;
position:relative;
}
ul {
margin:0;
padding:0;
}
/*Main menu*/
li.menu {
height:50px;
float:left;
}
ul.menu li {
list-style:none;
float:left;
height:49px;
text-align:center;
}
ul.menu li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:49px;
text-decoration:none;
color:#5d5d5d;
}
ul.menu li:hover > a {
color:#fdfdfd;
}
ul.menu li:hover > ul {
display:block;
}
/*sub menu*/
li.sub {
height:40px;
float:left;
}
ul.sub li {
list-style:none;
float:left;
height:39px;
text-align:center;
}
ul.sub li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:39px;
text-decoration:none;
color:#5d5d5d;
}
If anyone can tell me where i went wrong please do. First time trying to create one from scratch.
Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.
Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.
Thanks on advance.
Hey i think you want this do the sun class position relative and sub ul give position absolute
.sub{
position:absolute;
}
ul.menu li {
position:relative;
}
Live demo http://jsfiddle.net/HVk4G/
Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/