Problem
No space between image logo and menu although i assign margin-top:20px ?
actually i need to show full logo as you see logo cutting
logo problem
my fiddle work as below :
https://jsfiddle.net/ahmedsa/z2pmwsnr/
i need to modify fiddle to leave space between logo image and menu .
image logo
http://www.mediafire.com/view/qd5otyc1w9yv5e9/logo.png
my code
ul {
border-top: 4px solid red;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
li {
float: right;
}
li a {
color: white;
padding: 16px;
text-decoration: none;
}
li i{
color:white;
}
.w3ls_header_middle {
padding: 0 0;
padding-top:30px
}
.agileits_logo{
float:right;
margin-right:0em;
margin-top:20px
}
Related
I can't seem to center the navigation bar buttons. Is there a way to do this in the css file? I have tried centring but it hasn't worked.
HTML
<div class="navbar">
Home
News
Contact
</div>
CSS
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 1300px; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Links inside the navbar */
.navbar a {
display:inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I have modified your style for ".navbar a". Hope it will work for you.
You will love flexbox - super simple, and very useful.
Flexbox requires a parent and items.
You turn flexbox on on the parent, and then the various switches are set either on the parent (as in the case of justify-content) or on the items.
Here is a great cheatsheet for Flexbox.
Here is a fantastic YouTube tutorial.
DEMO:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
z-index: 99999;
text-align: center;
width: 100vw; /* Full width */
display:flex;
justify-content:center;
border:5px solid yellow;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border:1px solid pink;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
You can use
<div class="navbar">
<div style="display: inline-block;">
Home
News
Contact
</div>
</div>
If I understand you correctly, you need to align the links in the center of the navbar, for this you need to do:
CSS:
/* Links inside the navbar */
.navbar a {
/* float: left; remove this property */
display: inline-block; /* change display: block to inline-block */
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
You can see an example on: https://jsfiddle.net/4gy2japx/
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
margin: 0 auto;
}
.navbar ul {
display:inline-block;
list-style-type: none;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
</body>
</html>
You have to remove float left and add display: inline-block;
.navbar a {
float: left;
display: block;
There are several mistakes in your elements styling. Trying to align floated elements, assigning display block to linear links and defining empirical lengths when you're aiming for full lengths are some of them.
Try this instead:
html,body {
margin: 0; /* overwrite browser defaults */
}
.navbar{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
I have written this codepen for a Top Navbar.
This Top Navbar is a <div> element containing <a> elements:
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
The key CSS is as follows:
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
height: 50px;
margin: 0;
padding: 15px 20px;
color: black;
text-decoration: none;
}
I have vertically centered the links in the <div> element, by:
1) giving each link a height of 50px and then
2) giving the wrapping <div> the same line-height.
This works fine.
The problem is that I am unable to precisely control the padding and margin for the links.
Right now, I have given the padding for the links an arbitrary value:
padding: 15px 20px;
However, there is a small gap at the top and bottom of each link, where the Navbar background color shows through. This can be seen when you hover over a link.
When a link is moused over, I would link the link color to cover the entire NavBar. Is there any exact calculation I can make to ensure this, rather than choosing an arbitrary value for padding-top?
Secondly, there is also a gap at the sides of each link when one hovers. It can be clearly seen when one hovers over a link that is on either side of the "active" link (the green one). I would prefer this gap to be eliminated. How can I do this?
By Default a tag is inline element, you should change it display property to display: inline-block. so that you can set margin and padding.
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
margin: 0;
padding: 10px 20px;
color: black;
text-decoration: none;
display: inline-block; /* Set inline-block for a tag */
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
Use this. I gave display:block to a and display:flex to .topnav
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
height:50px;
display:flex;
line-height: 50px; /* same as height! */
}
.topnav a {
display:block;
height: 50px;
margin: 0;
padding: 0px 20px;
color: black;
text-decoration: none;
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
example
As the title says im having trouble.
Left image is without bg-color on #landing-wrap, right one is with bg-color on #landing-wrap.
This is my dropdown menu css code:
nav ul li a{
text-decoration: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid #293133;
display: block;
background: #404040;
color: #fff;
}
and this is my div below the nav menu:
#landing-wrap {
background: #00AFAA;
height: 600px;
}
you could try with this:
#landing-wrap {
background: #00AFAA;
height: 600px;
z-index: -1;
}
Hope it hleps.
I cannot get my vertical menu to go horizontally. Please help, as I tried to floating the ul left and right and tried inline none as well. I'm not quite sure I'm getting confused on which class I should put the inline or float on. Thank you in advance for everyone's help on this one as this one has been driving crazy, and I'm sure it is a simple solution but I just can't see it.
/* define a fixed width for the entire menu */
.horiz_nav {
width: 100px;
float: right;
}
/* reset our lists to remove bullet points and padding */
.mainmenu_horiz {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu_horiz ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu_horiz li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
float: right;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu_horiz a {
display: block;
background-color: #8EC752;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu_horiz a:hover {
background-color: #ABD281;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu_horiz li:hover .submenu_horiz {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu_horiz a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu_horiz a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu_horiz {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<header class="header" id="header">
<div id="horiz_nav" class="horiz_nav">
<ul class="mainmenu_horiz">
<li>Home</li>
<li>Courses
<ul class="submenu_horiz">
<li>Motor Learning</li>
<li>MS II</li>
</ul>
</li>
</ul>
</div>
</header>
First, .menu_horiz li should be .mainmenu_horiz li, and then this should have float: left, not right, plus it doesn't need to be floated * and* display: inline-block - one of those two is sufficient.
.mainmenu_horiz li{
list-style: none;
padding: 0;
margin: 0;
float: left;
}
/* I have just changed your css to this one. Just check if it works for you. */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
I have used Ryan's sticky footer in asp.net project. I have used it on master page and on child master page I have a vertical navbar. The problem is the footer goes behind the navbar. I want it to be on the top of the navbar. Also there is is a scrollable horizontal space on right side in child master page which I dont want. Also some of my pages have less content so how can I change thier height according to my wish so that I can set the footer accordingly.
vertical navbar:
#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}
#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}
#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}
footer:
* {
margin: 0;
}
form, html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
.footer, .push
{
height: 200px;
background-color:#333;
z-index:10;
}
.footer, .push {
clear: both;
}
I want it to be on the top of the navbar.
Since you have
z-index: 2;
on your vertical navbar, you would need a higher z-index, such as 3, on the main container of your footer. You have z-index 10 on the footer class, but I dont know whats nested in what with your html file. Could you post the html code for the footer and vertical navbar too?