Nav in a background color

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>

edited Jan 1 at 21:38

Lloyd Nicholson

298110

asked Jan 1 at 21:33

anais_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 |

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>

edited Jan 1 at 21:38

Lloyd Nicholson

298110

asked Jan 1 at 21:33

anais_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 |

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>

edited Jan 1 at 21:38

Lloyd Nicholson

298110

asked Jan 1 at 21:33

anais_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

edited Jan 1 at 21:38

Lloyd Nicholson

298110

asked Jan 1 at 21:33

anais_stemb

447

edited Jan 1 at 21:38

Lloyd Nicholson

298110

asked Jan 1 at 21:33

anais_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

asked Jan 1 at 21:33

anais_stemb

447

asked Jan 1 at 21:33

anais_stemb

447

asked Jan 1 at 21:33

anais_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 |

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

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);

}

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar Quintero

605714

add a comment |

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

Vickel

3,65242345

add a comment |

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

elbrant

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');
});

Post as a guest

Name

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

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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);

}

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar Quintero

605714

add a comment |

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);

}

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar Quintero

605714

add a comment |

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);

}

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar 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);

}

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar Quintero

605714

edited Jan 2 at 2:42

answered Jan 2 at 2:36

Edgar Quintero

605714

answered Jan 2 at 2:36

Edgar Quintero

605714

answered Jan 2 at 2:36

Edgar Quintero

605714

add a comment |

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

Vickel

3,65242345

add a comment |

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

Vickel

3,65242345

add a comment |

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

Vickel

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

Vickel

3,65242345

answered Jan 1 at 22:03

Vickel

3,65242345

answered Jan 1 at 22:03

Vickel

3,65242345

answered Jan 1 at 22:03

Vickel

3,65242345

add a comment |

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

elbrant

479211

add a comment |

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

elbrant

479211

add a comment |

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

elbrant

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

elbrant

479211

answered Jan 2 at 2:13

elbrant

479211

answered Jan 2 at 2:13

elbrant

479211

answered Jan 2 at 2:13

elbrant

479211

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk