I'm setting up a portfolio page for an assignment. I made some changes to my code, and now my navbar isn't working properly. I can't get my page links to fit in my actual navbar they are sitting below it for some reason.
I've tried messing with the padding and margins, but that's not doing anything. It was working fine at one point but I'm not sure what changed.
HTML:
<nav>
<p>STEVEN KANG</p>
<ul>
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</nav>
CSS
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: red;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
Those bio, portfolio, and contact links should be on the right centered inside the navbar mirroring my element saying my name.
I feel like it's a simple fix, I'm just not sure what's wrong right now.
I've taken a look at your code. It looks like you need to to utilise floats and a clearfix in order to achieve this.
Take a look at: https://codepen.io/mrmathewc/pen/OKbXRY
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Steven Kang - Developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<nav>
<div class="float-left">
<p>STEVEN KANG</p>
</div>
<ul class="float-right">
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
<div class="clearfix"></div>
</nav>
</body>
CSS:
* {
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
font-family: 'Rubik', sans-serif;
font-size: 48px;
}
h2 {
font-family: 'Rubik', sans-serif;
font-size: 30px;
}
h3 {
font-family: 'Karla', sans-serif;
font-size: 20px;
color: #0047b3;
;
}
p {
font-family: 'Karla', sans-serif;
font-size: 16px;
color: black;
font-weight: bold;
}
nav {
background-color: black;
height:60px;
color: #666666;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
}
nav p {
font-weight: bold;
margin-top: 25px;
margin-left: 10px;
color: white;
text-align: left;
}
nav a {
color: #0047b3;
}
nav ul {
margin-bottom: 5em;
}
.rightLinks {
list-style: none;
float: right;
margin-right: 50px;
margin-left: 15px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix { clear: both; }
I would recommend looking into Flexbox though, floats can give you some headaches.
Here's a basic example: https://codepen.io/mrmathewc/pen/wVoWgV
You'll need to extend the above to your code. This may help you understand Flexbox more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
i'm here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
try putting a margin-right: 50px or something on your nav tag
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
put margin-right: how much you want px on your nav tag, and don't forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.
After I add Bootstrap CDN all some of my html elements shift down. Such as nav bar, p's in footer. This happens exactly after adding a link to the header. If I comment it out the problem disappears.
Anyone knows how to solve this?
* {
margin: 0;
padding: 0;
}
body {
min-width: 800px;
}
header {
width: 100%;
position: fixed;
height: 40px;
line-height: 40px;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
.base {
background: #333333;
}
nav {
position: relative;
}
.logo {
float: left;
height: 100%;
padding: 0 20px;
}
.logo:hover {
background: #404040;
}
#logo_img {
height: 30px;
vertical-align: middle;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
nav li {
float: left;
width: 100px;
text-align: center;
color: #f2f2f2;
font-family: "Calibri";
font-size: 20px;
}
nav li:hover {
background: #404040;
}
#social {
float: right;
margin-right: 7px;
line-height: 35px;
}
#social li {
float: left;
text-align: center;
color: #f2f2f2;
padding: 0 4px;
}
#social li:hover {
background: #404040;
}
#social img {
height: 35px;
vertical-align: middle;
}
footer {
color: white;
height: 25px;
width: 100%;
padding: 5px;
position: fixed;
bottom: 0;
right: 0;
cursor: default;
border: none;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
footer a {
color: #007acc;
}
footer a:hover {
color: #007acc;
text-decoration: underline;
}
footer p {
color: #e6e6e6;
margin: 5px 15px;
font-size: 12px;
font-family: "Lucida Sans Unicode";
}
#info {
float: left;
}
#footer_name {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link type="text/css" href="css/main.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!--Bootstrap links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<header class="base">
<div class="logo">
<img id="logo_img" src="img/logo.png">
</div>
<nav>
<ul>
<li><span class="menu_item">Home</span></li>
<li><span class="menu_item">Diary</span></li>
<li><span class="menu_item">Foods</span></li>
<li><span class="menu_item">Settings</span></li>
<li><span class="menu_item">About</span></li>
</ul>
</nav>
<div id="social">
<ul>
<li><img class="social_icons" src="img/facebookc.png"></li>
<li><img class="social_icons" src="img/twitterc.png"></li>
<li><img class="social_icons" src="img/instagramc.png"></li>
</ul>
</div>
</header>
<footer class="base">
<p id="info">This website was created by a student of Wroclaw University of Technology. Contacts</p>
<p id="footer_name">Copyright © 2016 FitIt, Inc.</p>
</footer>
<!--Scripts-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Bottom pic navbar and social icons and text in footer are shifted...
Yes, that is always a problem when using common tags like <nav>,<header>,<footer> and etc.. because those elements are styled using Bootstrap, and makes conflict with existing styles.
you have several ways:
1) to make the current/existing style declarations more strict, i.e.
nav ul li { property:value!important;}
2) change the tagnames like this:
and then
nav.mynav ul li {property:value;}
3) change nav and etc tags with classified div, so you will have i.e.:
<div class="my_navig">
<ul>
<li><span class="menu_item">Home</span></li>
<li><span class="menu_item">Diary</span></li>
<li><span class="menu_item">Foods</span></li>
<li><span class="menu_item">Settings</span></li>
<li><span class="menu_item">About</span></li>
</ul>
</div>
What happened is you added some new styles via Bootstrap, which conflict with your existing CSS properties.
For the navbar links, the problem is here:
bootstrap.min.css:5 (line 5)
ol, ul {
margin-top: 0;
margin-bottom: 10px;
Add a property to your navbar ul like this:
<ul style="margin-bottom:0px;">
You will want to put the p tags inside a container like so:
<footer>
<div class="container">
<p>text</p>
</div>
</footer>
Bootstrap needs a proper block container inside that footer block, just like you have in your header block for the a.
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
I am making a little website for my automated green house but I ran in to a kink right away! My "#title-bar" just disappears! If anyone can help me figure this out I will love you long time! :P
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UrbanSector</title>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="container">
<div id="title-bar">
<i id="title-bar-logo" class="fa fa-leaf fa-2x fa-inverse"></i>
<h3>UrbanSector</h3>
<ul>
<li><i class="fa fa-home fa-inverse"></i>Home</li>
<li><i class="fa fa-gear fa-inverse"></i>Notifications</li>
</ul>
</div>
<nav>
<div id="nav-btn-area">
</div>
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</nav>
</div>
</body>
</html>
* {
/* border: limegreen 1px solid; */
padding: 0px;
margin: 0px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
#container {
width: 100%;
background-color: #E2E2E2;
display: block;
}
#title-bar {
padding: 2px;
background-color: #363636;
display: inline;
}
#title-bar h3 {
float: left;
margin-left: 5px;
color: #FFFFFF;
}
#title-bar ul {
display: inline;
float: right;
list-style-type: none;
}
#title-bar ul li{
margin-left: 5px;
float: left;
}
#title-bar ul li i{
}
#title-bar-logo {
clear: left;
float: left;
margin: auto;
color: green;
}
nav {
margin-top: 10px;
display: block;
background-color: #363636;
width: 14%;
}
Edited: To fix layout of post
1) Remove the display: inline; rule from the #title-bar class and
2) Give it a height.. say 30px;
#title-bar {
padding: 2px;
background-color: #363636;
height: 30px;
}
FIDDLE
Change display: inline to overflow: hidden on your '#title-bar` CSS rule.
#title-bar {
padding: 2px;
background-color: #363636;
overflow: hidden;
}
This will clear the floats inside the container and cause it to get the height of its contents.
Another way is to make display:inline; -> display:inline-block;