I have a webpage with a horizontal navigation at the top and a vertical navigation on the left. The left nav has links, that point to headers on the same page. The links worked, but the headers where on top of the page and blocked by the sticky nav. So I added this code:
<h2><span id="installation"></span>Installation</h2>
h2 {
position:relative;
}
h2 span {
position:absolute;
top:-60px;
}
The links work now and the headers move right under the top nav, when the links are clicked.
But if I scroll the page now and the headers move behind the sticky top nav, I can see the header text through the text in the nav.
picture of the problem
The nav uses this CSS:
.horizontal_menu {
position: -webkit-sticky;
position: sticky;
top: 0;
margin-bottom: 5px;
}
#ul_horizontal {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FEC107;
}
Just add a higher z-index like z-index: 2; to the .horizontal_menu class.
Bonus: If you want to make the vertical navigation to go under the horizontal navigation, make the z-index: 3; in this way the header navigation is always on top of everything.
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'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
header {
/*insert something here?*/
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li,
nav ul {
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {
display: none;
}
nav .material-icons {
float: left;
display: block;
}
}
<header>
Knox Enterprises Inc.
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
I would make header display: flex and use justify-content: space-between to separate them - or you can remove that for the text and nav to be side-by-side on the left, or justify-content: center to put them in the center or justify-content: flex-end to put them on the right. Put the text in an h1 or some other element if it's more appropriate, then add position: fixed; width: 100% to keep it pinned to the top of the page.
body {
min-height: 500vh;
background: #eee;
margin: 0;
}
header {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
background: #fff;
align-items: center;
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#media (max-width: 900px) {
nav { position: static; transform: translateY(0); }
header { justify-content: space-between; }
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
htmlcss
<header>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
<h1>Knox Enterprises Inc.</h1>
</header>
You right placed in the header text and navigation, however, in order to easily manipulate the position of the text using css it should be placed inside a div, p or span.
In order for your title stick in scroll to the top of the page there is position: fixed. When using it, don't forget to give the parent of the header (ex. body) position: relative.
body {
position: relative;
padding: 0;
margin: 0;
}
header {
position: fixed;
background-color: #bbc;
display: flex;
width: 100vw;
height: 100px;
line-height: 50px;
box-sizing: border-box;
padding: 0 16px;
flex-direction: column;
}
main {
padding: 16px;
padding-top: 100px;
}
p {
text-indent: 2em;
<header>
<span>Knox Enterprises Inc.</span>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
<main>
<h1>I'm trying to find out a way</h1>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
</main>
header>div {
display:inline;
float:left
/*insert something here?*/
}
nav {
display:inline;
width:auto;
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
<header>
<div>Knox Enterprises Inc.</div>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
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
}
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?
I'm currently building my very first responsive website.
For tablet, laptop and desktop use, the navigation is 'sticky' and works just as i'd like it to.
For any display smaller than that, the navigation is hidden inside a typical 'burger menu' which unveils the nav upon click.
This all works fine, however my issue is with the display of the nav upon 'burger-click'. The nav is displayed above the header and the content below, rather than pushing any content aside/down the screen and I feel it would by default.
I feel the issue is to do with positioning, I just can't put my finger on what.
Here is the position of my nav elements when displayed in it's regular and responsive states:
/* HEADER & NAV
--------------------------*/
header {
height: 140px;
position: relative;
background-image: url("../img/headerback.jpg");
text-align: center;
padding-top: 1.4em;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
}
header a {
font-size: 4.8em;
border-bottom: solid 5px #b9beaa;
}
header a, nav li, footer, footer a {
text-decoration: none;
color: #fff;
}
nav {
height: 36px;
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.245em;
padding-top: 2.5em;
}
nav li {
display: inline;
padding: 0 0.6em 0 0.7em;
}
nav li a {
border: none;
letter-spacing: 2px;
position: relative;
}
/*----------------- Responsive Nav */
nav ul {
display:none;
}
nav a#navIcon{
position: absolute;
right: 20px;
top: 20px;
border-bottom: none;
}
nav {
font-size: 0.6em;
}
nav li {
display: block;
padding-bottom: 0.6em;
}
header a {
font-size: 1.6em;
}
This is also my first attempt at using JSFiddle.
If anyone needs me to supply anything else please ask.
Thanks for any help.
https://jsfiddle.net/AlexEd/5a98ttq8/
There are a few issue preventing your navigation menu push down the content below:
jquery that hard set the height of ".nav-placeholder" div. the height should be "auto" so the browser can calculate the height and push the content below.
jQuery(".nav-placeholder").height("auto");
nav tag is position: absolute. change it to static. and height: auto.
nav {
font-size: 0.6em;
position: static;
height: auto;
}
header tag change height to auto in #media only screen and (max-width : 480px)
header {
height: auto;
padding-top: 0.8em;
padding-bottom: 0.2em;
}
I put together an example
https://jsfiddle.net/jonathon_wei/865nsj9q/1/