Nav in a background color
0
I have a problem regarding my navigation bar. My navigation bar is not in my block‘s background color. I can try position:absolute but it's not recommended.
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
position: absolute;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
I am stuck. Can anyone help or have an idea why the code doesn’t work? Please help.
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>html css
edited Jan 1 at 21:38
Lloyd Nicholson
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
add a comment |
0
I have a problem regarding my navigation bar. My navigation bar is not in my block‘s background color. I can try position:absolute but it's not recommended.
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
position: absolute;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
I am stuck. Can anyone help or have an idea why the code doesn’t work? Please help.
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>html css
edited Jan 1 at 21:38
Lloyd Nicholson
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42
add a comment |
0
0
0
I have a problem regarding my navigation bar. My navigation bar is not in my block‘s background color. I can try position:absolute but it's not recommended.
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
position: absolute;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
I am stuck. Can anyone help or have an idea why the code doesn’t work? Please help.
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>html css
edited Jan 1 at 21:38
Lloyd Nicholson
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
I have a problem regarding my navigation bar. My navigation bar is not in my block‘s background color. I can try position:absolute but it's not recommended.
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
position: absolute;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
I am stuck. Can anyone help or have an idea why the code doesn’t work? Please help.
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active"><href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>html css
html css
edited Jan 1 at 21:38
Lloyd Nicholson
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
edited Jan 1 at 21:38
Lloyd Nicholson
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
edited Jan 1 at 21:38
Lloyd Nicholson
298110
edited Jan 1 at 21:38
Lloyd Nicholson
298110
edited Jan 1 at 21:38
Lloyd Nicholson
298110
298110
asked Jan 1 at 21:33
anais_stembanais_stemb
447
asked Jan 1 at 21:33
anais_stembanais_stemb
447
asked Jan 1 at 21:33
anais_stembanais_stemb
447
447
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42
add a comment |
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42
add a comment |
3 Answers
3
active
oldest
votes
1
Add class="transparent" to your nav HTML element as well. Or you could just style your nav element in CSS directly like someone else said.
So either:
<nav class="transparent">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
Or:
nav {
padding-top: 10px;
padding-right: 120px;
width: auto;
background-color: rgba(0,0,0,0.5);
}
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
add a comment |
0
You didn't apply any background-color to your navbar:
just do this:
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
btw.: there is a mistake in your link as well: it should be: <li><a class="active" href="index.php">Home</a></li>
check below snippet
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>answered Jan 1 at 22:03
VickelVickel
3,65242345
add a comment |
0
Just add class="active" to each of your navigation links like you did on the home link (below):
<li><a class="active"><href="index.php">Home</a></li>
answered Jan 2 at 2:13
elbrantelbrant
479211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999107%2fnav-in-a-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Add class="transparent" to your nav HTML element as well. Or you could just style your nav element in CSS directly like someone else said.
So either:
<nav class="transparent">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
Or:
nav {
padding-top: 10px;
padding-right: 120px;
width: auto;
background-color: rgba(0,0,0,0.5);
}
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
add a comment |
1
Add class="transparent" to your nav HTML element as well. Or you could just style your nav element in CSS directly like someone else said.
So either:
<nav class="transparent">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
Or:
nav {
padding-top: 10px;
padding-right: 120px;
width: auto;
background-color: rgba(0,0,0,0.5);
}
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
add a comment |
1
1
1
Add class="transparent" to your nav HTML element as well. Or you could just style your nav element in CSS directly like someone else said.
So either:
<nav class="transparent">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
Or:
nav {
padding-top: 10px;
padding-right: 120px;
width: auto;
background-color: rgba(0,0,0,0.5);
}
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
Add class="transparent" to your nav HTML element as well. Or you could just style your nav element in CSS directly like someone else said.
So either:
<nav class="transparent">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
Or:
nav {
padding-top: 10px;
padding-right: 120px;
width: auto;
background-color: rgba(0,0,0,0.5);
}
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
edited Jan 2 at 2:42
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
answered Jan 2 at 2:36
Edgar QuinteroEdgar Quintero
605714
605714
add a comment |
add a comment |
0
You didn't apply any background-color to your navbar:
just do this:
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
btw.: there is a mistake in your link as well: it should be: <li><a class="active" href="index.php">Home</a></li>
check below snippet
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>answered Jan 1 at 22:03
VickelVickel
3,65242345
add a comment |
0
You didn't apply any background-color to your navbar:
just do this:
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
btw.: there is a mistake in your link as well: it should be: <li><a class="active" href="index.php">Home</a></li>
check below snippet
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>answered Jan 1 at 22:03
VickelVickel
3,65242345
add a comment |
0
0
0
You didn't apply any background-color to your navbar:
just do this:
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
btw.: there is a mistake in your link as well: it should be: <li><a class="active" href="index.php">Home</a></li>
check below snippet
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>answered Jan 1 at 22:03
VickelVickel
3,65242345
You didn't apply any background-color to your navbar:
just do this:
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
btw.: there is a mistake in your link as well: it should be: <li><a class="active" href="index.php">Home</a></li>
check below snippet
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Questrial');
body{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 38px;
}
.subtitles{
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtitle-left{
display: inline-block;
padding-left: 18px;
float: left;
}
.subtitle-right{
display: inline-block;
padding-left: 18px;
}
.far{
color: #C22312;
font-size: 16px;
}
.transparent{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.mylogo{
padding-top: 22px;
padding-left: 80px;
padding-bottom: 16px;
position: absolute;
}
nav{
padding-top: 10px;
padding-right: 120px;
width: auto;
}
nav ul{
width: auto;
padding: 0px;
margin: 0px;
list-style: none;
float: right;
}
nav ul li{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 13.333px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a{
padding: 10px 14px 10px 14px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
background-color: gray;
}
nav ul li a:hover{
background-color: white;
color: black;
}
.active{
background-color: #C52E1E;
color: #f2f2f2;
} <header>
<div class="subtitles">
<div class="subtitle-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtitle-left"><i class="far fa-envelope"></i> Admin@superbtc.biz </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtitle-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
<div class="transparent">
<img class="mylogo" src="https://i.ibb.co/kMZjHWx/logo.png" >
</div>
<nav>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Investement plan</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>answered Jan 1 at 22:03
VickelVickel
3,65242345
answered Jan 1 at 22:03
VickelVickel
3,65242345
answered Jan 1 at 22:03
VickelVickel
3,65242345
answered Jan 1 at 22:03
VickelVickel
3,65242345
3,65242345
add a comment |
add a comment |
0
Just add class="active" to each of your navigation links like you did on the home link (below):
<li><a class="active"><href="index.php">Home</a></li>
answered Jan 2 at 2:13
elbrantelbrant
479211
add a comment |
0
Just add class="active" to each of your navigation links like you did on the home link (below):
<li><a class="active"><href="index.php">Home</a></li>
answered Jan 2 at 2:13
elbrantelbrant
479211
add a comment |
0
0
0
Just add class="active" to each of your navigation links like you did on the home link (below):
<li><a class="active"><href="index.php">Home</a></li>
answered Jan 2 at 2:13
elbrantelbrant
479211
Just add class="active" to each of your navigation links like you did on the home link (below):
<li><a class="active"><href="index.php">Home</a></li>
answered Jan 2 at 2:13
elbrantelbrant
479211
answered Jan 2 at 2:13
elbrantelbrant
479211
answered Jan 2 at 2:13
elbrantelbrant
479211
answered Jan 2 at 2:13
elbrantelbrant
479211
479211
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999107%2fnav-in-a-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
As html parts can inherit surrounding settings you should add a full html example.
– Andreas Rehm
Jan 1 at 21:42