the parent div, .blog_content, has two childern, one is a p element and the other is an image. for some reason they are behaving like block objects and not inline block. what is happenning is they are appearing on top of each other, like block elements would and not beside each other like what im trying to accomplish. i have set widths for them but they seem to be just ignoring them.
ill post the code below.
the relevant html
edit to show the full code
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav>
<div id="nav_links">
Home
all posts
Services
About
Contact
</div>
<div id="nav_search">
<form method="post" action="#">
<input id="nav_form_input" type="text" name="nav_search" placeholder="Search">
<input id="nav_search_submit" type="submit" value="GO">
</form>
</div>
</nav>
<main>
<section>
<article>
<h1>My first blog post</h1>
<hr>
<div class="blog_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<img src="images/159.jpg" alt="shit hot 159">
</div>
</article>
</section>
<aside>
</aside>
</main>
</body>
</html>
the relevant css
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF HEADER.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
nav {
position: relative;
height: 40px;
width: 100%;
background-color: rgb(40,50,60);
}
#nav_links {
position: relative;
float: left;
padding-left: 40px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
#nav_search {
position: relative;
float: right;
padding-right: 80px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
nav > #nav_links > a {
text-decoration: none;
font-family: arial;
font-size: 12px;
color: rgb(220,220,220);
padding-left: 25px;
text-shadow: 0px 0px 1px grey;
letter-spacing: 1px;
}
#nav_form_input{
border-radius: 10px 0px 0px 10px;
height: 20px;
border: none;
outline: none;
color: rgb(220,220,220);
background-color: rgb(60,70,80);
padding: 5px;
}
#nav_search_submit {
border-radius: 5px;
height: 30px;
border: 1px solid rgb(60,110,30);
background: linear-gradient(rgb(100,160,80), rgb(90,140,60));
font-family: arial;
font-weight: bold;
color: rgb(240,240,240);
}
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF MAIN.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
main {
position: relative;
margin: 0 auto;
display: flex;
flex-flow: nowrap ;
width: 100%;
min-height: 600px;
flex-flow: row nowrap;
justify-content: space-around;
align-items: flex-start;
}
main section {
margin: 20px auto;
width: 65%;
min-height: 400px;
}
main section article {
border-radius: 30px 30px 0px 0px;
background-color: rgb(240,240,240);
height: 400px;
}
main section article h1 {
margin: 0 auto;
padding: 10px 0px 10px 20px;
border-radius: 30px 20px 0px 0px;
border: 2px 2px 0px 2px solid rgb(0,0,255);
color: white;
letter-spacing: 1px;
background: linear-gradient(rgb(80,170,240), rgb(60,140,240));
font-weight: 400;
}
hr {
width: 95%;
color: rgb(120,120,120);
}
.blog_content {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
}
main section article p {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
width: 42%;
}
main section article img {
margin: 3%;
width: 42%;
border-radius: 4px;
}
main aside {
margin: 20px auto;
width: 20%;
min-height: 400px;
border: 1px solid black;
}
i have tried using both flex and inline-flex but no joy with either
Related
*Hello, I want to have text below the image like in the example, but I can't figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>```
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
I approve of Usama's answer, the description is written in white on a white background.
You can add a specific rule:
.polaroid .container p {
color:black;
}
PS: Can you reformat your code?
Use 4 spaces or the button {} in the text editor
here is my index.html:
<div id="container1" class="py-0 my-0">
<div id="left" class="col-md-6">
<img class="image" src="C:\Users\asus\Desktop\project\image.png">
</div>
<div id="right" class="col-md-6">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-index">
HOME
</li>
<li class="nav-index">
ABOUT US
</li>
<li class="nav-index">
COURSES
</li>
<li class="nav-index">
LOG IN
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<p class="paragraph col-md-6">
<h3 class="Welcome text-center">Welcome to mobile legends!</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<footer class="footer1" id="footer1">
<h6>Contact the developer:</h6>
<p>luckyllemos0909#gmail.com</p>
</footer>
</div>
</div>
here is my style.css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
align-items: center;
vertical-align: middle;
}
#container1{
width: 100%;
height: 100%;
vertical-align: middle;
display: flex;
align-items: center;
}
#left,
#right {
width: 50%;
height: 100%;
}
#left {
background: #ffd6dd;
align-items: center;
}
.image{
margin-top: 50px;
margin-left: -10px;
padding: 100px;
}
#right {
background: #FBAED2;
align-items: center;
}
.paragraph{
color: red;
margin: 50px;
}
.fa {
margin-top: none;
padding: 20px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
color: #000000;
}
.fa-linkedin {
color: #000000;
}
.fa-youtube {
color: #000000;
}
.Welcome{
margin-left:60px;
}
.nav-link{
color: #000000;
}
.nav-index{
padding-left: 30px;
padding-right: 30px;
align-items: center;
}
my problem is when i put it in mobile phone it does not go flexible.
This is the original output:
and This what happens when try to look on mobile screen:
What you're looking for is media queries, which let you decide how your website looks on varying screen sizes. In the example below in the css class example is first shown how it would look on a larger screen size, then below with the media query in effect you can stylize how your page would look on a (in this example) a screen with a width of less than 900px. Take a look at the link below for further explanation.
.example {
font-family: "Droid+Sans";
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
margin: auto;
width: 50%;
left: 20%;
right: 20%;
padding-bottom: 100px;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Use Bootstrap Utility Classes in a better way. Since you are using bootstrap simply add your classes to work for different break points.
Add col-12 Utility classes on the following elements: Note that Bootstrap follows mobile-first approach.
<div id="left" class="col-12 col-md-6">
And
<div id="right" class="col-12 col-md-6">
I'm trying to place an image in a circle div that's placed above a section containing text like in the image shown:
How can this be done using CSS? Thank you.
Run the Code Here
https://www.w3schools.com/code/tryit.asp?filename=GHOLRSYI9PEK
.flex-wrapper{
background-color: lightgray;
padding: 30px;
padding: 30px 30px 30px 100px;
}
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
margin: 10px;
padding: 10px;
font-size: 16px;
}
.flex-container{
-webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
}
.avatar-wrapper{
min-width: 150px;
position: relative;
margin-left: -50px !important;
margin: 10px;
padding: 10px;
font-size: 16px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-wrapper:after{
content: '';
height: calc(100% + 40px);
width: calc(100% + 40px);
position: absolute;
background: purple;
top: -20px;
left: -20px;
border-radius: 50%;
z-index: 0;
}
.avatar-wrapper > img{
width: 150px;
height: 150px;
z-index: 1;
position: relative;
border-radius: 50%;
}
<div class="flex-wrapper">
<div class="flex-container">
<div class="col avatar-wrapper">
<img src="https://via.placeholder.com/200" alt="sample">
</div>
<div class="col text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>
</div>
</div>
img{ border-radius:50%; z-index:1 }
.container{
z-index:0;
margin-left:-100px;
box-shadow: 0px 0px 10px 1px lightgrey;
padding:5px;
width:50%;
}
.text{
text-decoration:underline blue;
margin-left:100px;
}
<div style="display:flex;">
<img src="https://via.placeholder.com/250">
<div class="container">
<div class="text">
I'm trying to place an image in a circle div that's placed above a section containing text like in the image shown:
</div>
</div>
</div>
Here is your solution. Just add your Image url in img tag
I would like to align the contents of div in the middle of vertical alignment. Table-cell will not function here, due to the fact, that parent is and must be displayed flex. This is used in the new WordPress Gutenberg editor. I do not want to modify the editor itself if possible and achieve this with CSS alone. Below you will find how the code looks currently. Custom HTML also cannot be added without editing editor. Is there a possibility of this be achieved in the current state?
Desired result:
Current code and state:
JSFiddle
HTML:
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
CSS:
h3 {margin: 0 0 20px 0;}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33 > div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
}
.right-33 > div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
You can add this to your wp-block-column column:
.wp-block-column {
display: flex;
flex-direction: column;
justify-content: center;
}
Here's your updated JSFiddle.
This is a great visual guide on Flexbox, it might help you in the future.
Create a column flexbox to .right-33>div:first-child and align to center using justify-content: center - see demo below:
h3 {
margin: 0 0 20px 0;
}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33>div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
/*ADDED FLEXBOX*/
display: flex;
flex-direction: column;
justify-content: center;
}
.right-33>div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
The setting to use for vertically centered alignment of flex children is align-items: center;, applied to the flex container. I added it to your code here (at the end of the CSS section):
h3 {
margin: 0 0 20px 0;
}
.wp-block-columns {
display: flex;
flex-wrap: no-wrap;
padding: 5px;
border: solid 1px red;
}
.wp-block-column {
flex: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
flex-grow: 0;
border: solid 1px blue;
}
.right-33>div:first-child {
flex-basis: 66.6666%;
margin-right: 32px;
}
.right-33>div:last-child {
flex-basis: 33.3333%;
margin-left: 32px;
}
.wp-block-image {
background: green;
margin: 0 auto;
width: 100%;
height: 200px;
}
.wp-block-columns.has-2-columns.right-33 {
align-items: center;
}
<div class="wp-block-columns has-2-columns right-33">
<div class="wp-block-column">
<h3>Some title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-column">
<figure class="wp-block-image">Here be image</figure>
</div>
</div>
I am unable to put " a:hover " on my home button in menu bar. even unable to remove the text-decoration.
while i was trying my hands on media queries , just got puzzled.
****stack overflow settings is not allowing me to post question unless i add more details*****
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #333;
color: white;
height: auto;
width:100%;
float: left;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: auto; /* what happens if i change the value to 100% */
float: right;
margin-right:30px;
}
header nav ul li {
display: inline;
padding: 15px 30px;
float: left;
border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
float: left;
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 60%;
margin-right: 2%;
}
.top {
background: tomato;
margin-bottom: 10px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
margin-bottom: 50px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
float: left;
height: auto;
width: 38%;
margin-top: 20px;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
#media screen and (max-width: 700px) {
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #444;
color: white;
height: auto;
width:100%;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: 100%; /* what happens if i change the value to 100% */
margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
display: block;
padding: 15px 30px;
float: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 100%;
}
.top {
background: tomato;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
height: auto;
width: 100%;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="mainbody">
<article class="top">
<h3>First Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article class="bottom">
<h3>Second Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</div>
<div class="sidebar">
<aside class="topside">
<h3>Top Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="middleside">
<h3>Middle Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="bottomside">
<h3>Bottom Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
</div>
<footer>
<p>Copyright © 2016 Faltoo Webdesigns</p>
</footer>
</div>
</body>
</html>
If I understand you right, you want to achive something like this?
https://jsfiddle.net/j7j54Lta/1/
I did some improvements and changed the structure. The li gets the .active-class and not the anchor. If the anchor in the active li is hovered it changes the color (or whatever you want to achive):
header nav ul li.active a:hover{
color: red;
/* or whatever*/
}
Moreover there is no text-decoration:
header nav ul li.active a {
text-decoration: none;
cursor: default;
}