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/
Related
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.
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>
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
I'm writing a small website to learn HTML and CSS and I'm having trouble getting my content to scroll in any direction.
When the browser window is resized to the point where any of the content cannot fit, instead of allowing a scroll, it just disappears. The Login button's div is supposed to appear 950px from the left. Meaning that if the browser window is smaller then that, it will allow you to scroll over, right?
And the News box will display any content written until it reaches the bottom of the browser window. Then it won't scroll or display.
Any suggestions?
The HTML is here is here and the CSS is here.
Your CSS has many position:fixed attributes in it. When an object's position is set to fixed, it will stay stationary, even if you are scrolling. Therefore, there was nothing that can move, so you couldn't scroll. Try changing your CSS to the following:
body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }
#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}
#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}
#boxes {
margin-top: 100px;
margin-left: 100px;
}
#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}
This will keep everything in the same position as it was, except the page can now scroll when the browser is resized to a point that it cannot display all its contents.
I have a navigation menu that is conflicting with a corner banner (image). However, it overlaps the navigation menu.
Here's what it looks like in a resolution greater than 1024x768:
And here's what it looks like in a browser with a resolution of 1024x768 (or less):
Here's my code (for the corner banner and navigation menu):
#cornerbanner {
background: url("../images/corner_banner.png") no-repeat;
display: block;
height: 117px;
width: 117px;
position: absolute;
top: 0;
right: 0;
z-index: 999;
text-decoration: none;
margin-top: -1px;
clear: both;
}
ul#navigation {
float: right;
display: inline;
margin-top: -28px;
}
ul#navigation li {
list-style:none;
display: inline;
margin-left: 80px;
text-transform: uppercase;
}
ul#navigation li a {
color: #4C4C4C;
font-size: 13px;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
}
ul#navigation li.active {
border-bottom: 2px solid #C63E24;
padding-bottom: 3px;
}
How do you want it to look in resolutions smaller than 1024? Do you want the li's to resize themselves smaller? Or a horizontal scroll bar to appear?
My suggestion would be to consider a fixed width design combined with a grid system like:
Skeleton
960gs
Edit
If you want them side by side, you can either:
Float #cornerbanner instead of position absolute
Put a margin-right: 117px on the ul#navigation
Both of these require that the parent containing them is wide enough to hold them both.