Highlighted

Right Aligned Fixed Header Background

New Here ,
Oct 12, 2019

Copy link to clipboard

Copied

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>

 

TOPICS
Code

Views

161

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Right Aligned Fixed Header Background

New Here ,
Oct 12, 2019

Copy link to clipboard

Copied

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>

 

TOPICS
Code

Views

162

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 12, 2019 0
Adobe Community Professional ,
Oct 13, 2019

Copy link to clipboard

Copied

How do you envision this working on smart phones and tablets?  I ask because that's what the majority of people use to surf the web now.   Desktops & laptops are the minority.    In Responsive Web Design (RWD), navigation is typically on top because it's the most efficient way to cater to ALL devices.    See Bootstrap Navbar code examples below.

https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2019 1
Adobe Community Professional ,
Oct 13, 2019

Copy link to clipboard

Copied

This is what I came up with.   Refer to my code comments below and feel free to experiment with different CSS values. 

 

clipboard_image_0.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fixed Navigation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/**Universal reset**/
* {margin:0; padding:0;
}
/**full sized background image, replace image with your own**/
body {
background: url(https://placeimg.com/1200/900/nature) center top fixed no-repeat;
background-size: cover;
}
/**Naviagtion**/
nav {
width: 10rem;
position:fixed;
/**distance from top, adjust as desired**/
top: 2vh;
right: 0;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
text-align: right;
background: rgba(0,0,0,0.65);
border-radius: 80px 0 0 80px;
}
/**nav list items**/
nav ul li {
line-height: 1.5;
list-style-type: none;
}
/**nav list anchors**/
nav li a {
display: inline-block;
text-decoration: none;
color: #FFF;
padding: 5%;
}
/**nav list anchors on rollover, click/tap and tab key**/
nav li a:hover, 
nav li a:active, 
nav li a:focus {
color: red;
text-decoration: underline;
background-color: #000;
}
</style>
</head>

<body>
<nav>
<ul>
<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>
</nav>
</body>
</html>

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2019 1