I'm building a fairly simple site that I need to be somewhat responsive.
Right now, when I resize my browser, the nav menu overlaps the Logo header which becomes super messy.
HTML:
<div class='header'>
<header>
<h1>Prince Innocence</h1>
</header>
<nav class='main'>
<ul>
<li>Music</li>
<li>Store</li>
<li>Shows</li>
<li>Videos</li>
<li>Contact</li>
</ul>
<ul class='social'>
<li>
<a href='http://www.youtube.com/princeinnocenceband' target=_"blank">
<span class='icon-youtube'></span>
<span class='hidden'>Youtube</span>
</a>
</li>
<li>
<a href='http://www.instagram.com/Prince Innocence' target=_"blank">
<span class='icon-instagram'></span>
<span class='hidden'>Instagram</span>
</a>
</li>
<li>
<a href='http://Prince Innocence.tumblr.com' target=_"blank">
<span class='icon-tumblr'></span>
<span class='hidden'>Tumblr</span>
</a>
</li>
<li class='soundcloud'>
<a href='http://www.soundcloud.com/Prince Innocence' target=_"blank">
<span class='icon-soundcloud'></span>
<span class='hidden'>Soundcloud</span>
</a>
</li>
<li>
<a href='http://www.twitter.com/Prince Innocence' target=_"blank">
<span class='icon-twitter'></span>
<span class='hidden'>Twitter</span>
</a>
</li>
<li>
<a href='http://www.facebook.com/Prince Innocence' target=_"blank">
<span class='icon-facebook'></span>
<span class='hidden'>Facebook</span>
</a>
</li>
</ul>
</nav>
</div>
And CSS:
.header {
width: 100%;
background: rgba(30, 30, 30, 0.6);
padding: 25px 0 20px 25px
}
.header h1 {
padding-right: 30px;
color: white;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
font-style: italic;
text-transform: uppercase;
color: #cccccc;
font-size: 300%
}
.header nav {
position: relative;
text-align: right;
margin-top: -50px;
margin-right: 30px
}
.header a, .header a:visited, header a:active {
color: #cccccc;
text-decoration: none
}
.header nav li {
display: inline;
padding: 0 5px 0 0
}
.header nav li a {
text-decoration: none;
font-size: 100%;
text-transform: uppercase;
color: #cccccc;
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s
}
Any thoughts? Thanks!
you have declared a negative margin on your nav element in .header nav
.header nav {
position: relative;
text-align: right;
margin-top: -50px; /* <-- THIS */
margin-right: 30px
}
if you take that away or change it to something closer to 0 you should have less overlap
Have you tried adding a clear:both; to the CSS for the logo header, which I guess is the <h1> element?
Related
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
I haven't found a solution yet..
my links on pictures on my homepage and the link in the ul li nav bar don't work. My links work on other pages except on the home page...
Links to the home-page from the home-page do work.
I only have this problem in IE and IEE. works fine on all other browsers.
Is something standing in the way of IE opening these links? The fault is not in my browser setting. IE finds the links when i hover over them but it doesn't do anything when I click on the links.
This is the code for the not working links:
This is the button image, 1 of the 3
<div class="buttonlinks">
<div class="thumbnail">
<img src="images/Knop1Layer.PNG" class="button">
<div class="tekstblok">
<ul class="buttontekst">
<li>HEALTH ECONOMIC MODELS</li>
<li>BUDGET IMPACT</li>
<li>Art. 81 TOOLS</li>
<li>VALUE TOOLS</li>
<li>…</li>
</ul>
</div>
</div>
CSS:
.button {
width: 200px;
min-height: 80px;
margin: 0 auto;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
color: #000;
transition: all 0.3s linear;
justify-content: center;
display: inline-block;
line-height: 30px;
}
.button:hover{
opacity: 0.5;
background-color: #FEFEFE;
cursor: pointer;
}
This is the ul li link.
<header class="header"> <a href="home.html" style="text-decoration:none !important;">
<div class="logoheader"><img src="images/hebias-logo.jpg" alt="Hebias" class="logo"></div>
</a>
<nav class="navigate">
<ul>
<p> Tel. +32 55 690 017 info#hebias.be</p> <!---link outlook--->
</ul>
<ul>
<li> <a class="link" href="maactivities.html" style="text-decoration:none !important;">Links</a></li>
</ul>
</nav>
</header>
CSS:
a{
color: #7F7F7F;
font-size: 14px;
letter-spacing: 2px;
font-weight: bold;
transition: all 0.3s linear;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #FFF;
}
I recently started to play round with Bootstrap and I created my logo to go on the top left of the page, and then the nav bar to go on the same line but on the right hand side, and then I wanted to say in the middle of the screen: "Welcome blablah"
However, the welcome bit appears on the top part of the screen, rather then the middle, so it's overlapping the logo for some reason.
Not sure why this is doing this, guessing some bad coding etc.
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.logo {
float: left;
padding-top: 50px;
padding-left: 40px;
}
.logo h1 {
text-transform: uppercase;
font-weight: 900;
font-size: 60px;
letter-spacing: -5px;
line-height: 50px;
color: white;
}
.navbar-nav>li>a {
line-height: 6px;
}
.navbar {
float: right;
padding-top: 53px;
padding-right: 60px;
font-size: 13px;
text-transform: uppercase;
}
.navbar-default {
background-color: transparent;
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
border-left: 0px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
}
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
background-color: #F8BD23;
text-decoration: none;
color: #ffffff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.navbar-nav>li {
padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="parallax">
<div class="logo"><img src="http://placehold.it/50x50"></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
a
</li>
<li>
b
</li>
<li>
c Us
</li>
<li>
d
</li>
<li>
e
</li>
<li>
f
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Classes</a>
<ul class="dropdown-menu">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li>
We
</li>
<li>
r
</li>
<li>
a
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container">
<div class="HomeMes">
<h1>WELCOME</h1>
</div>
</div>
</div>
The way I could "fix" it is do margin-top: 200px; on the HomeMes class but I know this is bad coding, so I'm trying to find the right way of doing it. If anyone could let me know what I have done wrong that would be excellent. Thanks.
So it should look like this :
Logo Navbar
Welcome message
There you go sir, change your container class to this :
.container {
width:100%;
height:100%;
display:flex;
justify-content:center;
flex-direction: column;
align-items: center;
}
Tested it in chrome and it works, but for some reason it doesn't work in code snippet preview. Hope this helps you. Display:flex helps a lot when trying to horizontally+vertically align elements!
I'm just getting into web design, and I'm wondering if my nav bar code in HTML and CSS is written properly or not. It works, but I'm not sure if that's the best way to write the code, or if I missed something that really should be in the code. Also, if anyone knows how to add a hover effect to just the text in the nav bar without changing it background color that would be much appreciated (similar to Apple's nav bar).
HTML and CSS:
#mainheader {
background-color: rgba(0, 0, 0, 0.7);
color: black;
margin: 0px;
width: 100%;
height: 50px;
top: 0px;
left: 0px;
position: fixed;
padding: 0px;
text-aling: center;
}
#mainheader #mh-content ul {
background-color: rgba (0, 0, 0, 0.7);
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 15px;
}
.mh-button-link {
display: inline;
padding: 20px;
text-decoration: none;
color: inherit;
font: 16px Verdana, Georgia, serif;
}
<nav id="mainheader" class="mainheader">
<div id="mh-content">
<ul>
<a class=mh-button-link href="homepage.html">Home</a>
<a class=mh-button-link href="FAQpage.html">Forum</a>
<a class=mh-button-link href="FAQpage.html">New</a>
<a class=mh-button-link href="FAQpage.html">Popular</a>
<a class=mh-button-link href="FAQpage.html">Login</a>
<a class=mh-button-link href="FAQpage.html">Contact</a>
<a class=mh-button-link href="FAQpage.html">FAQ</a>
<a class=mh-button-link href="FAQpage.html">Search</a>
</ul>
</div>
</nav>
Your code looks mostly fine to me. As others have suggested, you're missing <li></li> inside of your <ul>. Also, there is a typo in your CSS: text-aling should be text-align.
To add a hover effect, add a new color to the link's hover pseudoclass:
.mh-button-link:hover {
color: gray;
}
If you want it to transition, add transitions to your link:
.mh-button-link{
...
-webkit-transition: color 250ms ease;
transition: color 250ms ease;
}
Here is a live, correct example:
#mainheader {
background-color: rgba(0, 0, 0, 0.7);
color: black;
margin: 0px;
width: 100%;
height: 50px;
top: 0px;
left: 0px;
position: fixed;
padding: 0px;
text-align: center;
}
#mainheader #mh-content ul {
background-color: rgba (0, 0, 0, 0.7);
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 15px;
}
.mh-button-link {
display: inline;
padding: 20px;
text-decoration: none;
color: inherit;
font: 16px Verdana, Georgia, serif;
-webkit-transition: color 250ms ease;
transition: color 250ms ease;
}
.mh-button-link:hover {
color: gray;
}
li {
display: inline;
}
<nav id="mainheader" class="mainheader">
<div id="mh-content">
<ul>
<li><a class=mh-button-link href="homepage.html">Home</a></li>
<li><a class=mh-button-link href="FAQpage.html">Forum</a></li>
<li><a class=mh-button-link href="FAQpage.html">New</a></li>
<li><a class=mh-button-link href="FAQpage.html">Popular</a></li>
<li><a class=mh-button-link href="FAQpage.html">Login</a></li>
<li><a class=mh-button-link href="FAQpage.html">Contact</a></li>
<li><a class=mh-button-link href="FAQpage.html">FAQ</a></li>
<li><a class=mh-button-link href="FAQpage.html">Search</a></li>
</ul>
</div>
</nav>
JSFiddle version: https://jsfiddle.net/na0ke180/
See thi fiddle
HTML
<nav id="mainheader" class="mainheader">
<div id="mh-content">
<ul>
<li> <a class=mh-button-link href="homepage.html">Home</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">Forum</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">New</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">Popular</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">Login</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">Contact</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">FAQ</a>
</li>
<li> <a class=mh-button-link href="FAQpage.html">Search</a>
</li>
</ul>
</div>
</nav>
Also, add these below given CSS to your Stylesheet
CSS
#mainheader #mh-content ul li{
display:inline-block;
}
#mainheader #mh-content ul li:hover{
color:red;
}
For the hover effect, there is a pseudo class called :hover in CSS.
You miss the <li> tags inside your <ul>. Anyway, the rest looks good.
For references regarding html, you can visit many pages like eg. http://www.w3schools.com/
And for your text hover effect, add the following.
.mh-button-link:hover{
opacity: 0.6;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
Apple like hover effect
See this fiddle, for your apple-style hover effect:
http://jsfiddle.net/z9xmgoza/1/