Nav Bar and Header Combined - html

Question

I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
header {
/*insert something here?*/
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li,
nav ul {
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {
display: none;
}
nav .material-icons {
float: left;
display: block;
}
}
<header>
Knox Enterprises Inc.
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>

Answer 1

I would make header display: flex and use justify-content: space-between to separate them - or you can remove that for the text and nav to be side-by-side on the left, or justify-content: center to put them in the center or justify-content: flex-end to put them on the right. Put the text in an h1 or some other element if it's more appropriate, then add position: fixed; width: 100% to keep it pinned to the top of the page.
body {
min-height: 500vh;
background: #eee;
margin: 0;
}
header {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
background: #fff;
align-items: center;
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#media (max-width: 900px) {
nav { position: static; transform: translateY(0); }
header { justify-content: space-between; }
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
htmlcss
<header>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
<h1>Knox Enterprises Inc.</h1>
</header>

Answer 2

You right placed in the header text and navigation, however, in order to easily manipulate the position of the text using css it should be placed inside a div, p or span.
In order for your title stick in scroll to the top of the page there is position: fixed. When using it, don't forget to give the parent of the header (ex. body) position: relative.
body {
position: relative;
padding: 0;
margin: 0;
}
header {
position: fixed;
background-color: #bbc;
display: flex;
width: 100vw;
height: 100px;
line-height: 50px;
box-sizing: border-box;
padding: 0 16px;
flex-direction: column;
}
main {
padding: 16px;
padding-top: 100px;
}
p {
text-indent: 2em;
<header>
<span>Knox Enterprises Inc.</span>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
<main>
<h1>I'm trying to find out a way</h1>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
</main>

Answer 3

header>div {
display:inline;
float:left
/*insert something here?*/
}
nav {
display:inline;
width:auto;
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
<header>
<div>Knox Enterprises Inc.</div>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>