Searched a lot but dint get specific answer. I am creating a website where i want to use a side bar.I want the side bar to expand to right on hover as shown below......Before
After
and the code
.body {
margin :0;
border :0;
}
* {
box-sizing : border-box;
}
.main-header {
position : absolute ;
width : 100% ;
height : 44px;
background-color : #999;
z-index:4;
}
.main-content {
padding-top :46px;
}
.side-nav {
position : absolute;
width:100% ;
background-color:#666;
height:100vh;
z-index:3;
padding-top:44px;
}
.side-nav ul {
list-style :0;
padding :0;
margin:0;
}
.side-nav ul li {
padding : 20px 10px;
border-bottom :1px solid #333;
}
.side-nav ul li a {
color:#fff;
text-decoration : none;
}
.side-nav ul li a i {
color: #333;
}
#media screen and (min-width: 600px)
{
.side-nav {
width :80px;
}
.side-nav ul li {
text-align: center;
}
.side-nav ul li span:nth-child(2) {
display:none;
}
.side-nav ul li i {
font-size: 26px;
}
.main-content {
margin-left:85px;
}
}
#media screen and (min-width: 1000px)
{
.side-nav{
width:200px;
}
.side-nav ul li {
text-align :left;
}
.side-nav ul li span:nth-child(2) {
display:inline;
}
.main-content {
margin-left:205px;
}
}
<DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="javascripts/jquery2.1.3/jquery.min.js"></script>
<link rel='stylesheet' href="css/myCss.css" />
</head>
<body>
<div class="main-header">
<span></span>
</div>
<div class="side-nav">
<nav>
<ul>
<li><a href="#"> <span><i class="fa fa-calendar"></i></span>
<span>xyz</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>sbc</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>Option 3</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>Option 4</span>
</a></li>
</ul>
</nav>
</div>
<div class="main-content">
<p>asjjasjlasj</p>
</div>
</body>
</html>
How do i do that using css and js with a nice transition .Thank you
You can use transition only using CSS3, I apply it to width, but could be done to anything you think work better for you:
so just replace the lines below and it should works for you, if you don't want to apply to width, do it to any other attributes that work better for your case, so just replace .side-nav as below and add .side-nav:hover as well:
.side-nav {
position : absolute;
width:80px ;
background-color:#666;
height:100vh;
z-index:3;
padding-top:44px;
-webkit-transition: width .5s; //add this line(Safari)
transition: width .5s; //add this line(Safari)
}
//also add hover as below
.side-nav:hover {
width:120px ;
}
for more info about CSS transitions, look at the link below:
https://www.w3schools.com/css/css3_transitions.asp
It's actually pretty simple when you use CSS Transitions
First you can just use the hover selector to change the width:
.sidebar {
width: 50px;
}
.sidebar:hover {
width: 200px;
}
That technically already works but now CSS Transitions comes into play:
.sidebar {
transition: width 300ms ease;
}
Basically what it does, whenever the width changes it plays a 300 millisecond long transition. ease is just an additional argument that makes the transition not so abrupt.
Everything together should look something like this
Related
When you look at the menu of this website:
https://www.eurotuin.be/
And when you try to hover it, it collapses really fast.
see the menu here
I've tried experimenting with the following code, but it doesn't seem to work:
.main-nav__link {
transition:all 0s ease 0s!important;
}
This one has same effect:
.main-nav__link {
transition:all 3s ease 3s!important;
}
You are currently using 'display' which is not something that can be transitioned.
You should use something that can be transitioned like 'opacity' combined with 'visibility'.
The following code should achieve the desired effect.
.main-nav__flyout {
display: block !important;
}
.main-nav__item .main-nav__flyout {
transition: all 0.5s ease 0.2s!important;
opacity: 0;
visibility: hidden;
}
.main-nav__item:hover .main-nav__flyout {
opacity: 1;
visibility: visible;
}
Two things :
How transition would have any effect if duration is 0s (I'm no expert, this is a genuine question) ? Plus the transition is applied on your link, it wouldn't have any effect on your menu (which is a different element).
So the issue here is : your menu is shown/hidden with the change of the display property from none to block.
More precisly, .hide() and .show() are applied to the menu element on mouseout and mouseover events (from the li element). So the menu 'hide' and 'show' as soon as the mouse enter or exit the li element.
Also be aware that the display property can't be animated or transitioned.
This is the best solution as a fresher
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
I want the navbar to disappear when it reaches 768px and become a button on the right side. The button will open the navbar back, I have added code to make the navbar to disappear at 768px but it doesn't work. Not so sure what is wrong since the button shows 768px. But the navbar does not disappear at 768px.
html
<nav id="Nav" class="navbar nav">
<div class="container flex">
<img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg" alt="Company logo" class="company-logo">
<button class="navbar-toggler" aria-expanded="false" aria-controls="navbarDropdown"><span>☰</span></button>
<div class="nav-parent">
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</div>
</nav>
css
navbar-toggler{
position: absolute;
right: var(--size-20);
outline: none;
background-color: transparent;
border: 1px solid transparent;
}
.navbar-toggler span{
color: var(--pureblack);
font-size: var(--size-20);
}
[aria-controls="navbarDropdown"]{
display: none;
}
.navbar .container{
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
display:flex;
align-items: center;
}
.navbar-brand{
cursor: pointer;
}
.nav-parent{
margin-left: auto;
}
.navbar-nav{
display: flex;
align-items: center;
}
.navbar-nav li{
align-items: center;
}
.nav-link a{
margin-right: 2.5rem;
}
responsive
#media screen and (max-width: 768px) {
[aria-controls="navbarDropdown"] {
display: block;
}
[aria-expanded="false"] ~ ul{
display: none;
}
[aria-expanded="true"] ~ ul{
display: block;
}
}
javascript
<script>
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({ target }){
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
</script>
Your css to select the ul via the button,
[aria-expanded="false"] ~ ul{
display: none;
}
[aria-expanded="true"] ~ ul{
display: block;
}
Won't work, here's why. The tilde (~) is a sibling selector. For this selector to work the way you specified, your ul would have to appear after the button, within the same container, like this:
<button ariaexpanded="true"></button>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
</ul>
So if your .nav-parent div isn't being used, you could try remove that and it will likely work.
This is my approach when doing mobile menus. Have your media query target a certain container which goes to 100% viewport width and height at your mobile breakpoint. It should also be offset vertically or horizontally out of the view of the user. Then you just need some JS to toggle a 'showing' class which positions the menu on the user's screen:
Your toggle nav function:
function toggleNav({ target }){
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
// Toggle nav 'showing' class
if (nav.classList.contains('showing')) {
nav.classList.remove('showing')
} else {
nav.classList.add('showing')
}
}
// Close menu button
closeNavButton.addEventListener('click', () => {
nav.classList.remove('showing')
})
CSS:
/* Don't show the 'close' button on desktop */
.nav-parent button {
display: none;
}
/* Mobile breakpoint */
#media screen and (max-width: 768px) {
[aria-controls="navbarDropdown"] {
display: block;
}
[aria-expanded="false"] ~ ul{
display: none;
}
/* Your menu now takes up 100% of screen, and is offset to the left */
.nav-parent {
opacity: 0;
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: -100vw;
transition: all 0.25s ease;
background: white;
}
/* When the showing class is added, it will position itself on the screen */
.nav-parent.showing {
opacity: 1;
left: 0;
}
}
HTML (add a close-menu button)
<div class="nav-parent">
<button>
Close
</button>
<ul class="navbar-nav">
...
</div>
JSfiddle demo
There's lots of room for creativity.
i built a navigation bar for my website.this code is brought from another site. it's css here
* {
padding:0;
margin:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
background-color:#FFF
}
header {
width:100%;
background-color:#06C;
z-index:1000;
}
.menu-bar {
color:#FFF;
font-size:26px;
cursor:pointer;
padding:10px 12px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:50px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.drawer {
position:fixed;
left:-280px;
background-color:#06C;
height:100%;
z-index:100;
width:200px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
}
.drawer ul li {
list-style:none;
}
.drawer ul li a {
padding:10px 30px;
text-decoration:none;
display:block;
color:#FFF;
border-top:1px solid #039;
}
.drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.drawer ul li a i {
width:50px;
height:35px;
text-align:center;
padding-top:15px;
}
#keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
#keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
it's HTML here
<header>
<input type="checkbox" id="tag-menu">
<label class="fa fa-bars menu-bar" for="tag-menu"></label>
<div class="drawer" id="drawer">
<nav class="overlay-menu">
<ul>
<li><i class="fa fa-user-secret"></i>A</li>
<li><i class="fa fa-check-circle-o"></i>B</li>
<li><i class="fa fa-user-circle"></i>C</li>
<li><i class="fa fa-info-circle "></i>D</li>
</ul>
</nav>
</div>
My problem is that the navigation bar drawer menu doesn't close after clicking on menu item. i need to close the drawer after click any item on the drawer menu. how to solve this problem. what are the scripts which i can use?. Your help is highly appreciated.Thanks
Demo is here: http://androidcss.com/demos/css/css-drawer-menu/#
I simplified the code a little bit because:
so you can have more flexibility later on when you want to add other things.
your nav menu will be closed from the start, not after 1 second like in the previous code used.
58 lines of code instead of 125
It will also give you an introduction opportunity to jQuery.
Please see the comments that explain each line of code and write a comment if you don't understand something.
Codepen to play with: https://codepen.io/larrytherabbit/pen/NWrGMWE
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css drawer menu demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- this loads the font aswesome library for the hamburger icon (fa-bars) and the social icons; the class 'fa' calls the font awesome library and the fa-xxx class calls the specific icon needed-->
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<i class="fa fa-facebook"></i> <span>Facebook</span> <!-- nav menu no need for <ul> or <li> tags here -->
<!-- the <a> tags are link tags and the <i> tags are used to call font awesome icons again -->
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
</nav>
For my webpage (Github Page), I want to make my menu sensible to the size of the screen, such that it collapses when they are too small and the elements do not fit. I am planning to add the following solution: w3schools, using a "burguer" icon to join all the elements when the screens are small.
I am able to create the menu with the different elements, to add the "burguer" icon, and then to hide it by default when the screen is big. However, the media queries and the js function must be wrong, because when I do my screen small, the "burguer" icon appears, but the other elements do not dissapear, and cliking on the "burguer" does nothing. I guess there is a mistakes or confussion with the id names somewhere. Could it be?
In the example from w3schools uses the div tab, but I am not. Is it indispensable for the example to work?
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "header_nav") {
x.className += " responsive";
} else {
x.className = "header_nav";
}
}
/* Header_nav ----- DRAFT */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav .icon {
display: none;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a,
#header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button,
#header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before,
#header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active>a,
#header_nav nav ul li.active>span {
color: #e44c65;
}
#header_nav nav ul li>ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
#header_nav a:not(:first-child) {
display: none;
}
#header_nav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
#header_nav.responsive {
position: relative;
}
#header_nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
#header_nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Navigation Menu -->
<section id="header_nav">
<nav id="nav">
<ul>
<li>
<a href="index">
<p style="color:white">Home</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Research</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Game-dev</p>
</a>
</li>
<li>
<a href="photography">
<p style="color:white">Photography</p>
</a>
</li>
<li><i class="fa fa-bars"></i></li>
</ul>
</nav>
</section>
The whole code can be found in the repo (Github Repo).
Can you see maybe the error that I am not able to spot? Why the example from w3school is not applicable?
I would really appreciate your help here. Thank you very much in advance!
Here's a small reproducible solution based on your code:
https://jsfiddle.net/hneromu4/5/
I added a class fixed to the link elements that were supposed to stay when we resized the window:
<section id="header_nav">
<nav id="nav">
<ul>
<li class="fixed">Home</li>
<li>Research</li>
<li>Game-dev</li>
<li>Photography</li>
<li class="fixed hamburguer"><i class="fa fa-bars"></i></li>
</ul>
</nav>
</section>
I also tweaked your css and js.
In your CSS and HTML I have made some alterations as your hamburger menu was inside the same thing which you were trying to hide which is not really a good idea I have also adjusted your CSS slightly as you were setting a position to relative but not setting display to block. Hope this helps!
CSS (line 2525 - 2547):
#media screen and (max-width: 600px) {
#nav {display: none;}
#header_nav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
#nav.responsive {position: relative;display: block;}
#header_nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
#nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
HTML:
<!-- Header Navigation Menu -->
<section id="header_nav">
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
<ul>
<li><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></li>
</ul>
</nav>
</section>
Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you
Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}
Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.
Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.
When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker
Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}