Right Aligned Fixed Header Background
Problem:
Essentially what I'm trying to accomplish is a semi-opaque rounded rectangle that just fits the navigation bar, extending in from the right side of the screen no farther than a fex px past the text when the longest list item is expanded by 150% while hovered. Just a little something to make the navigation bar readable over the page content, but I don't want it to cover the whole top of the screen.
Background Info:
On my website I have a fixed header, right floated. The text stays a few px from the edge of the screen no matter the size, which is exactly what I want. I am currently having a tough time finding a way to find a responsive solution to the problem of the header background only extending far enough past the navigation menu to allow the text in the header to expand.
So far I have tried keeping the header at 100% width and making the div .nav_container only as big as it needs to be, then aligning it to the right side of the page using margins as both px and % however this has the undesired effect of A) moving the navigation bar text, and B) not staying aligned to the edge of the page no matter the size. Googling has been limited success, but it got me as far as the fixed header so I've got that going for me.
Of course I could just flip my design, make the container 50% of the width of the page and float the list left, but I prefer the look of the navigation on the right side.
I don't have a very good understanding of HTML or CSS, I've just been fumbling along with Dreamweaver since I was told you can build most of a site without leaving the live/design views. If someone could point me in the right direction for figuring this out I'd be super grateful!
Code copied from Dreamweaver:
<styles>
.page_container header {
height: 70px;
width: 100%;
position: fixed;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 1000;
padding-bottom: 11px;
}
.page_container header .nav_container {
padding-bottom: 0px;
width: 100%;
height: 70px;
background-color: hsla(0,0%,14%,0.85);
margin-top: 10px;
padding-left: 0%;
position: fixed;
overflow-x: hidden;
overflow-y: hidden;
border-bottom-left-radius: 80px;
border-top-left-radius: 80px;
}
header .nav_container .nav_bar_list {
margin-right: 14px;
position: relative;
height: 45px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 12px;
}
.nav_container .nav_bar_list li {
float: right;
margin-left: 0.5%;
margin-right: 0.5%;
list-style-type: none;
}
.nav_bar_list li a {
padding-top: 15px;
padding-bottom: 15px;
display: block;
text-decoration: none;
background-image: url(url);
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: hsla(0,0%,100%,1.00);
list-style-type: none;
-webkit-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
font-size: 100%;
margin-left: 0px;
}
</styles>
<body>
<header class="header" id="nav_container">
<div class="nav_container">
<ul class="nav_bar_list">
<li><a href="ABOUT.html">ABOUT US</a></li>
<li><a href="CONTACT.html">CONTACT</a></li>
<li><a href="SERVICES.html">SERVICES</a></li>
<li><a href="PROJECTS.html">PROJECT GALLERY</a></li>
<li><a href="HOME.html">HOME</a></li>
</ul>
</div>
</header>
</body>
AdChoices