Stuck with nav html css - how to get it full width - html

I've got a nav here:
http://tumolo.co.uk/navbar/
I've tried all sorts - but I cant get this nav to fill up the browser 100% width. It has white space on both Left and Right side of the navbar.
I put each nav li to 16% as it's 100% / 6 menu elements, 16% is the closest to get each element equal size.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
#media screen and (min-width: 600px) {
.nav li {
width: 16%;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
border-right: 1px solid #ebe3e3;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
.nav li:last-child {
border-right: 0;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>

Flexbox will get you there!
.nav ul {
width: 100%;
display: flex;
justify-content: space-around;
}
If you're wanting the ends to be flush against the edge, it may be better to use:
justify-content: space-between;
Looking at the existing styles on the element, you can remove the padding-left and padding-right, as mentioned in the comments. Also, with flex, you may want to check out vendor prefixes.
Note: Support for old IE can be shaky.
The above does leave gaps in the header, as also mentioned in the comments. An alternative, suggested by Joe, is:
#navList {
display:flex;
}
#navList li {
flex:1 auto;
}

If it's not absolutely necessary, I'd ditch display: inline-block; on the .nav li - it messes with width calculations, as you know since you've adjusted for it with the -4px on each, which is only an approximation.
If you float the .nav li left, add box-sizing: border-box; and increase the width to 16.6667%, you'll get total coverage. You'll have to adjust .nav ul to contain it properly, but I've updated the snippet below to show.
body {
background: #ccc none repeat scroll 0 0;
margin: 0;
padding: 0;
}
.nav ul {
background-color: #fff;
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
float: left;
width: 100%;
}
.nav li {
border-bottom: 1px solid #888;
font-size: 1em;
height: 40px;
line-height: 40px;
}
.nav a {
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
text-decoration: none;
transition: background-color 0.3s ease 0s;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
background-color: #5e7ea4;
color: #ffffff;
}
.nav ul li#mvl a:hover {
background-color: #5b3e52;
color: #ffffff;
}
.nav ul li#admin a:hover {
background-color: #7c6e61;
color: #ffffff;
}
.nav ul li#liquid a:hover {
background-color: #7c4c4c;
color: #ffffff;
}
#media screen and (min-width: 600px) {
.nav li {
border-bottom: medium none;
border-right: 1px solid #ebe3e3;
font-size: 1em;
height: 50px;
line-height: 50px;
width: 16.6667%;
box-sizing: border-box;
float: left;
}
.nav li:last-child {
border-right: 0 none;
}
}
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition</li>
<li id="hmrc">Cant pay HMRC?</li>
<li id="cvl">CVA</li> <li id="mvl">MVL</li>
<li id="admin">Administration</li>
<li id="liquid">Liquidation</li>
</ul>
</div>

What I understand from your explanation, you are trying to make a header navigation that has 100% width and the nodes of the menu will have the same width;
You should use calc() let me give you an example and you can apply that to your code;
<div class="nav">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
Also in your CSS;
.nav { height:30px; width:100%;
border-bottom:1px solid #000;}
.nav li {
width:calc(100% / 4);
list-style: none;
text-align:center;
float:left;
}
We divided %100 to 4 because we have 4 li elements in our navigation.
Check on jsfiddle: https://jsfiddle.net/d9b1re2p/1/
Hoping that would help, please post your code as it is simplified in your question with a better explanation next time.

Use CSS table. It behaves much like the flex box but with better support.
It will space out each li equally up and down without the need for the 16% media query.
You will just need to tweak the styling of the links a little to add in your border.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
display:table;
width:100%;
table-layout:fixed;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display:table-cell;
vertical-align:top;
position:relative;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>

Related

Why is my submenu parent focusing when I hover over another menu item?

I'm working on a side navigation menu for my website using a bootstrap template. I'm a designer, not a developer, but I'm trying to learn by doing. I got everything working right, mostly. But I can't figure out why when I hover over the first or second menu items, the third one is expanded.
It's a parent for a submenu, but I've tried removing CSS rules one by one to see if that changes or fixes anything, but it doesn't seem to be working. Here is a link to the codepen that has bootstrap already loaded.
https://codepen.io/steve-mullen/pen/WNgNBjE
<html lang="en">
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li class="no-sub-nav">1<span>Menu 1</span></li>
<li class="no-sub-nav">2<span>Menu 2</span></li>
<li class="has-sub-nav">3<span>Menu 3</span>
<ul class="sub-nav">
<li><span>Sub 1</span></li>
<li><span>Sub 2</span></li>
<li><span>Sub 3</span></li>
<li><span>Sub 4</span></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
#media (max-width: 991px) {
#header {
width: 300px;
background: #fff;
border-right: 1px solid #e6e9ec;
left: -300px;
}
}
/* Main Nav */
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav a,
.no-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
}
.nav-menu a i,
.nav-menu a:focus i {
font-size: 20px;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
#media (min-width: 992px) {
.nav-menu a,
.nav-menu a:focus {
width: 56px;
}
.nav-menu a span,
.nav-menu a:focus span {
display: none;
color: #fff;
}
.nav-menu li {
padding: 0;
}
.sub-nav {
display:none;
position: absolute;
}
.has-sub-nav:hover .sub-nav {
display: block;
transition: 0.3 sec;
position: absolute;
margin: 0;
width:100%;
padding-top: 8px;
padding-left:15px;
}
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.no-sub-nav a:hover,
.no-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.no-sub-nav a:hover span,
.no-sub-nav:hover>a span{
display: block;
}
/* Sub Nav */
.has-sub-nav {
padding: 0;
display: block;
position: relative;
}
.has-sub-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.has-sub-nav ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav {
margin-bottom: 8px;
}
.has-sub-nav li {
padding-bottom:8px;
}
.has-sub-nav a,
.has-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.has-sub-nav a {
border: 4px #1a1a1a solid;
}
.has-sub-nav a span,
.has-sub-nav a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
.has-sub-nav a:hover,
.has-sub-nav .active,
.has-sub-nav .active:focus,
.has-sub-nav:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.has-sub-nav a:hover span,
.has-sub-nav .active span,
.has-sub-nav .active:focus span,
.has-sub-nav:hover>a span {
color: #fff;
}
.has-sub-nav a:hover,
.has-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.has-sub-nav a:hover span,
.has-sub-nav:hover>a span{
display: block;
}
I found the issue in your CSS, you just need to remove the width: 100% in
.has-sub-nav a,
.has-sub-nav a:focus
and it will works as normal.
This is because the width:100% make the 3rd menu to fit to its container's(ul) width, so whenenver 1st or 2nd menu is expanding, ul is expanding and cause 3rd to following its parent width then cause the issue.
https://codepen.io/zeikman/pen/dyqPZKW

working navigation but toggle does not open

After nearly a week I am still struggling with toggle on navigation.
This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
``` .menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+.menu {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.
nav ul ul {
display: none;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
list-style-type: none;
}
nav li a {
text-decoration: none;
display: inline-block;
margin: 10px 20px 5px 0;
padding: 8px 10px;
}
nav li a:link, nav li a:visited {
color: #646565;
background: #e8e9eb;
}
nav li a:link:hover, nav li a:visited:hover {
color: black;
}
nav li:hover ul {
display: block;
position: absolute;
}
input.toggle,
label.toggle {
display: none;
}
label.toggle {
font-weight: 900;
font-size: 1.2em;
padding: 10px 20px;
}
#media (max-width: 960px) {
nav {
display: none;
}
input.toggle, .toggle span {
display: none;
}
input[type=checkbox]:checked ~ nav, label.toggle {
display: block;
cursor: pointer;
}
nav li {
float: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li ul {
display: block;
}
nav li ul li {
margin-left: 20px;
}
nav li a {
display: block;
margin-left: 20px;
}
}
<div class="wrapper">
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
<input class="toggle" id="toggle" type="checkbox">
<nav>
<ul>
<li class="current">Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li>Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</nav>
</div>
Just change your selector from:
#toggle:checked+.menu {
display: block;
}
to:
#toggle:checked+ ul {
display: block;
}
See snippets below:
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+ul {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>

How to make clickable box

I want to make one of my element in menu "Login" as clickable box (with hover effect). I made link as display: block; but there is not enough.
Link to screenshot:
I've problem with blue borders on top and bottom. How to make these borders also as clickable box?
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li>
<li>+48 123 456 789</li>
</ul>
CSS:
nav li
{
padding: 7px 0;
}
ul a
{
color: #006db6;
text-decoration: none;
}
ul li:nth-child(5)
{
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a
{
color: #FFF;
display: block;
}
ul li:nth-child(5) a:hover
{
color: #006db6;
background-color: #FFF;
}
You can try in this way (explanations in comments):
nav li
{
/*padding: 7px 0;*/
}
ul a
{
color: #006db6;
text-decoration: none;
padding: 7px 0; /* moved from li */
background-clip: content-box; /* background only for content, without padding */
}
ul li:nth-child(5)
{
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a
{
color: #FFF;
display: block;
}
ul li:nth-child(5) a:hover
{
color: #006db6;
background-color: #FFF;
}
Try like this:
nav {
float: left;
}
ul {
list-style-type: none;
text-align: center;
}
ul a {
color: #006db6;
text-decoration: none;
padding: 6px 0;
background-clip: content-box;
}
ul li:nth-child(5) {
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a {
color: #FFF;
display: block;
}
ul li:nth-child(5) a:hover {
color: #006db6;
background-color: #FFF;
}
<nav>
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li>
<li>+48 123 456 789</li>
</ul>
</nav>

How can i make an image in navbar be affcted on hover

i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>
Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>

inline h3 moves ul to the right

I'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.