I want to create a horizontal sub menu when hover on main menu like this
But this is what I have made
How do I resolve this problem?
create this
but i want this enter image description here
/**********************************************************************/
body {
margin: 0;
padding: 0;
}
#iri-header {
font-family: 'Iranian Sans';
font-size: 15px;
line-height: 1.142;
display: block;
border: 0;
width: 1349px;
height: 40.5px;
border-bottom: 1px solid gray;
}
#orb-header {
position: relative;
}
.iri-header-container {
width: 1008px;
height: 39.5px;
margin: 0 auto;
border: 0;
padding: 0 16px;
}
.logo {
width: 96px;
height: 39.5px;
border-left: 1px solid black;
float: right;
}
.logo img {
float: right;
padding-top: 8px;
}
.loging {
width: 197.5px;
height: 39.5px;
float: right;
cursor: pointer;
border-left: 1px solid black;
}
.loging:hover {
border-bottom: 2px solid black;
}
#vorod {
float: right;
padding: 12px;
}
.loging img {
width: 30px;
height: 30px;
margin-top: 6px;
margin-left: 8px;
}
.search {
width: 300px;
height: 39.5px;
border-right: 1px solid black;
}
.Search {
width: 45px;
height: 39.5px;
float: right;
margin-right: 10px;
}
.Search img {
width: 100%;
height: 100%;
}
.brand {
width: 1349px;
height: 95px;
background-color: #BB1919;
display: block;
border: 0;
position: relative;
}
.site-brand {
width: 976px;
height: 59px;
margin: 0 auto;
}
.brand .site-brand a > span {
float: right;
font-family: A Ketab;
font-size: 35px;
margin-top: 6px;
color: #ffffff;
text-decoration: none;
}
.menu {
width: 1349px;
height: 36px;
}
.menu-container {
width: 1349px;
height: 35px;
background-color: #A91717;
}
.menu-ul {
margin: 0 auto;
height: 35px;
}
#main_menu {
list-style: none;
float: right;
margin-right: 93px;
font-size: 16px;
}
#main_menu li {
display: inline-block;
vertical-align: bottom;
}
#main_menu li a {
display: block;
padding: 10px; /* For example */
position: relative;
}
li a {
display: inline-block; /* To enable padding */
padding: 10px; /* For example */
}
li:not(:hover) .submenu {
display: none;
}
li:hover .submenu {
position: absolute;
right: 0; /* If you want to stick it to the left edge, remove this line. */
white-space: nowrap;
}
#main_menu li:hover {
background-color: #eb4b4b;
}
#main_menu li ul {
list-style: none;
background-color: #820e0e;
position: absolute;
width: 100%;
float: right;
display: none;
direction: rtl;
margin-right: 60px;
}
#main_menu li:hover ul {
display: block;
}
#main_menu li ul li {
float: left;
direction: rtl;
border-bottom: 1px solid #BB4545;
display: block;
}
#main_menu li ul li a {
float: none;
display: block;
}
li {
display: inline-block;
position: relative;
vertical-align: bottom;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>سایت IRI</title>
<link href="~/Content/StyleSheet.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme-rtl.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<div>
<header id="iri-header">
<div id="orb-header">
<div class="iri-header-container">
<div class="logo">
<a href="#">
<img src="~/Content/img/Logo.png" />
</a>
</div>
<div class="loging">
<a href="/Home/Register">
<div class="loging-container">
<span id="vorod">ورود/ثبت نام</span>
<img src="~/Content/img/pic1.png" />
</div>
</a>
</div>
<div class="search">
#Html.Partial("P_Search")
</div>
</div>
</div>
</header>
<div class="brand">
<div class="site-brand">
<a href="/Home/Index">
<span>اخبار ایران و جهان</span>
</a>
</div>
<div class="menu">
<div class="menu-container">
<div class="menu-ul">
<ul id="main_menu">
<li>1صفحه اصلی</li>
<li>صفحه اصلی2</li>
<li>3صفحه اصلی</li>
<li>4صفحه اصلی</li>
<li>
صفحه اصلی5
<ul class="sub-menu">
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
</ul>
</li>
<li>صفحه اصلی6</li>
<li>7صفحه اصلی</li>
<li>
8صفحه اصلی
<ul class="sub-menu">
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
</ul>
</li>
<li>صفحه اصلی9</li>
<li>10صفحه اصلی</li>
<li>صفحه اصلی11</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You mean something like this?
http://codepen.io/bra1N/pen/yJwZWo
This code is important:
#main_menu li {
float: right;
border-left: 1px solid #BB4545;
position: static;
}
#main_menu li ul {
list-style: none;
background-color: #820e0e;
position: absolute;
width: 100%;
top: 110px;
float: left;
display: none;
direction: rtl;
}
This code should make .submenu appear only if a is hovered.
/* Reset */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Important part */
li {
display: inline-block;
position: relative;
vertical-align: bottom;
}
li a {
display: inline-block; /* To enable padding */
padding: 10px; /* For example */
}
li:not(:hover) .submenu {
display: none;
}
li:hover .submenu {
position: absolute;
right: 0; /* If you want to stick it to the left edge, remove this line. */
white-space: nowrap;
}
DEMO:
http://codepen.io/anon/pen/dXArNx
Related
So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.
HTML
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />
<style>
</style>
</head>
<body>
<header>
<div id="container">
<nav id="nav">
<ul>
<img src="finesselogotag.png" id="titleimage"> </img>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
CSS
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
float:left;
height: 50px;
text-align: center;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
Here's what it looks like normally:
And here's what it looks like on an iPad:
Like I said, I'm kind of new to this kinda thing. Any advice on how to do this would be greatly appreciated, thanks!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
use this tag in section,it will work.
use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Try any of these..
Bootstrap navigation:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
W3.css navigation:
https://www.w3schools.com/w3css/w3css_navigation.asp
Check this please, here is the responsive view for your code
https://codepen.io/atulraj89/pen/QJVPJv
$('.hamberger').click(function() {
$('.hamberger-nav-bar').toggleClass('active-left');
});
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
position: relative;
float:left;
height: 50px;
text-align: center;
margin-top: 50px;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
.hamberger {
display: none;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
/* HAMBERGER CSS */
.hamberger {
position: absolute;
top: 30px;
right: 15px;
z-index: 999999;
padding: 10px 35px 16px 0;
cursor: pointer
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
content: "";
position: absolute;
display: block;
width: 35px;
height: 3px;
border-radius: 1px;
border-color:#ffffff;
background: #ffffff;
cursor: pointer;
}
.hamberger span:before {
top: -10px;
}
.hamberger span:after {
bottom: -10px;
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
transition: all 300ms ease-in-out;
}
.hamberger.active span {
background-color: transparent
}
.hamberger.active span:before,
.hamberger.active span:after {
top: 0;
}
.hamberger.active span:before {
transform: rotate(45deg);
}
.hamberger.active span:after {
top: 10px;
transform: translatey(-10px) rotate(-45deg);
}
/* MEDIA QUERY */
#media (max-width: 991px){
.hamberger-nav-bar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-nav-bar.active-left {
left: 0;
position: relative;
}
.hamberger-nav-bar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#nav {
float: none;
height: auto;
position: relative;
z-index: 99;
}
#nav ul {
width: 100%;
float: none;
}
#nav li {
float: none;
height: auto;
width: 100%;
}
#nav li a {
float: none;
}
#titleimage {
top: 0;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homecontent.css" type="text/css" />
</head>
<body>
<header>
<div id="container">
<div class="hamberger">
<span></span>
</div>
<nav id="nav" class="hamberger-nav-bar">
<ul>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
<img src="finesselogotag.png" id="titleimage">
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
Sea the above code.
I'm currently studying web development so I'm practising some html and css.
I'm having problems placing my logo on the left.
what I wish to accomplish is something like this:
prototype navigation
I have a logo on the left side of my navigation bar and on my right is my navigation menus home, partners and products that turns into a hamburger menu when the width of the screen decreases.
Can you please help me out or point me to a good resource to get my layouts properly done? thank you all in advance.
Here is my HTML code:
.menu {
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a {
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span {
color: dodgerblue;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label{
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu {
display: block;
}
}
<header>
<div class="nav">
<div id="logo">
<img src="img/logoblackandred.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
</div>
</div>
</header>
Try
img{
display:inline;
width:70px;
height:50px;
float:left;
}
Like this?
I removed the position: fixed and added display: inline to #logo and #menu
.menu {
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
width: 100%;
display: inline;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
#logo {
display: inline;
}
#media only screen and (max-width: 500px)
{
label
{
display: block;
cursor: pointer;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
}
<header>
<div class="nav">
<div id="logo">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="logo" width="200px">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
</div>
</div>
</header>
I change Html code little , and added to css code a few line.
This is Demo
.menu
{
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
.logo {
display: none;
}
.lg-logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
#media only screen and (max-width: 500px)
{
label
{
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
.logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
}
<header>
<div class="nav">
<div id="logo">
<img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
<img class="lg-logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
</div>
</header>
Note : Resize Browser and see result.
Try checking below code jsfiddle link.
You can change the width for logo id and menu class https://jsfiddle.net/pradeepv/yxnLs89h/
Please relpace this code with your old code.
.menu
{
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
.logo {
display: none;
}
.lg-logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
#media only screen and (max-width: 500px)
{
label
{
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
.logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
}
<div class="nav">
<div id="logo">
<img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
<img class="lg-logo" src="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg" alt="logo">
</div>
</div>
I have an unordered list that contains several list elements inside. Also inside is an image element which is to be centered. I tried to center it using the margin: auto; property but since there are list elements on the side, it takes that into account when centering itself. How do I center the image in respect to it's container?
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;
margin: auto;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You may have to position the image absolute into the nav element using:
position: absolute;
left: 50%;
transform: translateX(-50%);
Also position:relative the nav element.
This way the image ignores whatever is inside the nav element.
body{
margin:0px;
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position:relative;
}
.nav li {
vertical-align: top;
margin: 5px 10px;
display: inline;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You can use display:inline-block to get it.
.nav img {
display: inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
height: 21px;
width: 24px;
}
.nav li {
display:inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
margin: 5px 10px;
}
.nav {
text-align:center; /*Add this*/
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
text-align:center;
}
.nav li {
display:inline-block;
vertical-align: middle;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
vertical-align: middle;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://lorempixel.com/200/200/" alt="Twitter Icon">
</ul>
</nav>
1) All Elements be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;<------Remove
display: inline-block;<-----------Add
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;<---------Change to margin-left: 0px;------
}
.nav img {
display: block;<----------Change to display: inline-block;---
margin: auto;<---------Remove
height: 21px;
width: 24px;
}
.clearfix{<-----------Add this Selector
text-align: center;
width: 100%;
padding-left: 0;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 0px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
}
.clearfix{
text-align: center;
width: 100%;
padding-left: 0;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
2) Just image be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;<---------Add
}
.nav li {
float: left;<---------remove
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;<-------Change To display: inline-block;---
margin: auto;<----------remove---------
right: 0;<--------------Add
position: absolute;<-------------Add
height: 21px;
width: 24px;
}
.clearfix { <----------------Add
width: 50%;
padding-left: 0;
position: relative;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
right: 0;
position: absolute;
}
.clearfix {
width: 50%;
padding-left: 0;
position: relative;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
Put your img element into li and do some changes in your css like below snippet:
.nav ul {
width: 800px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
vertical-align: middle;
margin: 5px 10px;
}
.nav img {
display: block;
margin: auto;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
<!--html-->
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li>
</ul>
</nav>
I have following menu that properly works. All I need is that once an item is selected or hovered its whole section be highlighted in all sizes of screen. At the moment just partial part of each item get highlighted.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.container-menu {
width: 100%;
background: none repeat scroll 0 0 rgb(0,0,0);
min-height: 63px;
}
.menu-items {
max-width: 1130px;
width: 100%;
height: 100%;
margin: 0 auto; //
text-align: center;
text-align: left;
position: relative;
padding-top: 36px;
text-align: center;
}
.menu-items li {
background-color: rgb(0,0,0);
}
.menu-items #home {
background-color: green;
}
.menu-items {
position: relative;
}
.menu-items a {
color: #fff;
}
.menu-items ul {
padding: 0;
list-style: none;
margin: 0;
}
.menu-items li {
display: inline;
border-left: 1px solid #fff;
}
.menu-items li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
position: absolute;
top: 7px;
right: 7px;
display: none;
}
.menu-items li:hover {
background-color: green;
}
#media only screen and (max-width: 720px) {
.burger {
display: block;
}
.menu-items ul {
display: none;
}
.menu-items li {
display: block;
border: 0;
}
.container-menu>img {
display: none;
}
}
#media ( min-width :1500px) {
.menu-items li {
padding: 8px 38px;
}
}
#media ( min-width : 979px) and (max-width:1500px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
}
#media ( min-width : 768px) and (max-width: 979px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
.item {
height: 186px !important;
}
}
#media ( max-width : 767px) {
.container-menu {
min-height: 63px;
}
.menu-items li {
border-left: 1px solid #fff;
padding: 8px 12px;
}
}
#media ( max-width : 480px) {
.container-menu {
min-height: 48px;
}
.menu-top-center {
width: 100%;
}
.menu-top-right {
padding-bottom: 4px;
}
}
</style>
</head>
<body>
<header>
<div class="container-menu">
<div class="menu-items">
<ul id="">
<li id="home"><a href="#"><i class="fa fa-home f24"></i>
Home</a></li>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="mitem3">Item 3</li>
<li id="item4">Item 4</li>
<li id="item5">Item 5</li>
<li id="item6">Item 6</li>
<li id="item7">Item 7</li>
</ul>
<div class="burger hidden-md">
<i class="fa fa-align-justify fa-2x"></i>
</div>
</div>
</div>
</header>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.burger').click(function() {
$('.menu-items ul').toggleClass("visible");
});
});
</script>
</body>
</html>
I have completely redesigned new Navigation bar as per your images. Please have a look.
It is 100% responsive
working fine in large screen
in mobile view, I have disabled collapse of navigation bar so design will be same in smaller devices
body {
line-height: 0 !important;
}
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li,
.navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.navbar > .container {
text-align: center !important;
}
.navbar-header,
.navbar-brand,
.navbar .navbar-nav,
.navbar .navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.collapse.navbar-collapse {
float: none !important;
display: inline-block!important;
width: auto !important;
clear: none !important;
}
.navbar {
position: relative !important;
}
.back-stripe {
/*display: none;*/
position: absolute;
top: 0;
left: 0;
right: 0;
height: 75px;
z-index: 999999;
background-image: url('http://i59.tinypic.com/2yvucqw.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
.navbar-default {
background: #4C0084 !important;
}
.navbar-default .navbar-nav > li:first-child {
border-left: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li {
box-sizing: border-box;
border-right: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li > a {
color: #fff !important;
font-weight: bold !important;
}
.navbar-default .navbar-nav > li > a.active {
background: #FFA600 !important;
}
.navbar-default .navbar-nav > li > a:hover {
background: #FFA600 !important;
color: #fff !important;
}
.navbar-nav {
margin: 0 !important;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="back-stripe"></div>
<div class="container" style="padding-top: 3%;margin-top:-4px;">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
<li>Item5
</li>
<li>Item6
</li>
<li>Item7
</li>
</ul>
</div>
</div>
</div>
I could solve the issue by adding following code
.menu-items li{
padding:16px 38px;
}
I think I fixed your issue. Try use this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-m-tp {
width: 100%;
background-color: orange;
}
.container-m-btn {
width: 100%;
background: none repeat scroll 0 0 rgb(75, 0, 130);
min-height: 62px;
}
.container-m-btn>img {
max-height: 40px;
width: 100%;
position: absolute;
z-index: 99999;
}
.m-tp {
max-width: 970px;
max-width: 1237px;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
}
.m-btn {
max-width: 1900px;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
text-align: left;
position: relative;
padding-top: 35px;
text-align: center;
}
.m-btn li:hover {
background-color: orange;
}
.m-tp-center {
display: inline-block;
//
width: 50%;
width: 80%;
height: 100%;
}
.m-tp-right {
display: inline-block;
float: right;
height: 100%;
margin-right: 3%;
//
width: 200px;
//
padding-left: 20px;
}
.m-btn {
position: relative;
}
.m-btn a {
color: #fff;
}
.m-btn ul {
padding: 0;
list-style: none;
margin: 0;
}
.m-btn li {
display: inline;
padding: 25px 32px 9px;
border-left: 1px solid #fff;
}
.m-btn li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
background-image: url(img/burger.png);
position: absolute;
top: 7px;
right: 7px;
display: none;
color: #FFF;
}
#media only screen and (max-width:720px) {
.burger {
display: block;
}
.container-m-btn {
min-height: 40px;
}
.m-btn ul {
display: none;
border-top: 1px #fff solid;
}
.m-btn li {
display: block;
border: none;
padding: 16px 32px;
border-bottom: 1px #fff solid;
}
.m-btn li:last-child {
border-bottom: none;
}
.container-m-btn>img {
display: none;
}
}
.m-btn .visible {
display: block;
}
.m-btn li:hover {
background-color: orange;
}
.m-btn li:active {
background-color: orange;
}
</style>
</head>
<body>
<header>
<div class="container-m-btn">
<img src="http://i.stack.imgur.com/GRNPb.png" />
<div class="m-btn">
<ul id="">
<li id="item1"><i class="fa fa-home f24"></i> Home</li>
<li id="item2">Item2</li>
<li id="item3">Item3</li>
<li id="item4">Item4</li>
<li id="item5">Item5</li>
<li id="item6">Item6</li>
<li id="item7">Item7</li>
<li id="item8">Item8</li>
</ul>
<div class="burger"></div>
</div>
</div>
</header>
<style>
.m-btn #item7 {
background-color: orange;
}
</style>
<div class="container">
<p>This is body</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.burger').click(function() {
$('.m-btn ul').toggleClass("visible");
});
});
</script>
</html>
If I change the top horizontal image to a curvy one the height of white borders of menu items would be too short for that, I need them to be a bit taller. (no clue)
//unclear, are you looking for this ?
//added border-bottom to the #media li,
.menuitems li {
display: block;
border-left:0px;
border-bottom:1px solid #fff;
}
In burger style the width of the last item is a bit short. (No idea why)
// add padding:0 to UL to remove empty space in first tab
.menuitems ul {
list-style: none;
margin: 0;
padding:0;
}
I need to make all menu items a bit wider. (Changing width did not work)
.menuitems li {
display: inline-block;
padding: 10px 15px 10px 35px;
border-left: 1px solid #fff;
width:80px;
}
Update these lines into your styles
.m-btn ul {
list-style: none;
margin: 0;
padding: 0;
}
It worked for me.....
EDIT
Or try this one
#media only screen and (max-width: 480px) {
.m-btn ul {
padding: 0;
}
}
I was just wondering how do I get my navigation menu to adjust in width as my div box does? help would be great!
Here is the jsfiddle example: http://jsfiddle.net/AtM2Q/
Here is the code:
<html>
<head>
<style>
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
}
ul#navmenu li {
min-width: 203px;
max-width: 285px;
width: 100%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
#navmenu ul {
display: inline-block;
list-style-type: none;
white-space:nowrap;
}
#page1 {
text-align: center;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 100%;
min-width: 203px;
max-width: 285px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
white-space: nowrap;
}
ul#navmenu .sub1 a {
margin-top: 0px;
}
ul#navmenu .sub2 a {
margin-left: 0px;
}
ul#navmenu li:hover > a {
background-color: grey;
}
ul#navmenu li:hover a:hover {
background-color: red;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 30px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 8pt;
position: absolute;
top: 8px;
right: 1px;
}
#navmenu {
display: inline-block;
text-align: center;
list-style-type: none;
margin: 0px auto;
padding: 0px;
position: relative;
white-space: nowrap;
}
.rarrow {
font-size: 8pt;
position: absolute;
top: 6px;
right: 0px;
}
ul#navmenu {
width:100% !important;
}
#page1 .link1 {
color: grey;
border-top: 2px solid red;
}
#page2 .link2 {
color: grey;
border-top: 2px solid red;
}
#page3 .link3 {
color: grey;
border-top: 2px solid red;
}
.container {
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
margin: 0px auto;
}
#box2 {
height: 1000px;
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
background-color: yellow;
float: left;
margin: 0px auto;
}
#boxinbox1 {
width: 100%;
height: 200px;
background-color: #E51837;
}
</style>
</head>
<body bgcolor="#E51837">
<div id="box2">
<div id="page1">
<div id="boxinbox1">weiuhgqiogq</div>
<ul id="navmenu">
<li>Home
</li>
<li>hyperlink 2<font color="white">
<span class="darrow">▼</font>
</span>
<ul class="sub1">
<li>hyperlink 2.1
</li>
<li>hyperlink 2.2
</li>
<li>hyperlink 2.3
</li>
</ul>
</li>
<li>hyperlink 3
</li>
<li>hyperlink 4<span class="darrow"><font color="white">▼
</font></span>
<ul class="sub1">
<li>hyperlink 4.1
</li>
<li>hyperlink 4.2
</li>
<li>hyperlink 4.3<span class="rarrow">
<font color="white">▶</font></span>
<ul class="sub2">
<li>hyperlink 4.3.1
</li>
<li>hyperlink 4.3.2
</li>
<li>
hyperlink 4.3.3
</li>
</ul>
</li>
</ul>
</li>
<li>hyperlink 5
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
__________________________________________________________________________oamgogeponrbapoenbepoanbaepobneaporibnmaeorpbinmepobaeponbaepornbwponbwrpoBNWpornbwropUNBWORPBWPOrbwoprBWOI[rbjw[J[owigjw[oiGJWr[ogj[worgijw[rPGJ
If I understand you correctly...
You have to set the width of the ul#navmenu li in %.
With 5 main-navigation points like you have it at the moment..
Do stuff like:
ul#navmenu li {
width: 19%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
But I'll recommend to use Twitter-Bootstrap...
Here is the answer
ul#navmenu a {
text-decoration: none;
display: block;
width: 50%;
max-width: 285px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
white-space: nowrap;
}
remove min-width its not necessary and give width size to 50%, you have given it has 100%, it was covering all over the div
along with that
ul#navmenu li {
border:1px solid white;
max-width: 285px;
width: 50%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
this is the css which is used to give width and border to "li" apply this you will be able to see what you looking for, i did it on your fiddle it worked fine
let me know