Trying to get rid of display: flex because its not compatible with internet explorer versions. Need an alternative to display my header inline and centered. I\'ve tried to use i
You can create a wrapper div and use display table inside in order to center your navbar. But is your problem to center the h2 tag vertical or do you want to have only your whole heading centered horizontal while having the nav inline?
html, body {
position: relative;
margin: 0;
padding: 0;
background-image: url("backround.jpg");
background-repeat: repeat-y;
}
/*Nav Menu/Home Page*/
.wrapper {
position: fixed;
width: 100%;
background-image: url("header.jpg");
background-position: center;
z-index: 1;
border-bottom: 5px solid #ff8000;
border-top: 5px solid #ff8000;
}
.index-header {
display: table;
margin: 0 auto;
line-height: 50px;
height: 50px;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px #000;
}
.clear {
clear: both;
}
span.heading {
float: left;
display: block;
font-family: Georgia;
font-size: 1.6em;
color: #fff;
text-shadow: 3px 3px #000;
}
nav {
padding: 0 1%;
}
nav a {
float: left;
display: block;
color: #ff8000;
text-align: center;
padding: 0 16px;
min-height: 40px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #fff;
color: #ff8000;
}
nav .material-icons {
float: left;
padding-bottom: 5px;
display: none;
font-size: 36px;
color: #ff8000;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
<!DOCTYPE html>
<html lang="en-us">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<div class="wrapper">
<nav class="index-header">
<i class="material-icons">menu</i>
<a href="#">Home</a>
<a href="#">About</a>
<span class="heading">Knox Enterprises</span>
<span class="clear"></span>
</nav>
</div>
</body>
</html>
I used some float and position changes to your markup to get you started. you may need to modify to get the alignment you wanted
html, body {
position: relative;
margin: 0;
padding: 0;
background-image: url("backround.jpg");
background-repeat: repeat-y;
}
/*Nav Menu/Home Page*/
.index-header {
/* display: flex;*/
position: fixed;
justify-content: center;
align-items: center;
width: 100%;
background-image: url("header.jpg");
background-position: center;
z-index: 1;
text-transform: uppercase;
border-bottom: 5px solid #ff8000;
border-top: 5px solid #ff8000;
text-shadow: 2px 2px #000;
}
header h2 {
font-family: Georgia;
font-size: 1.6em;
color: #fff;
text-shadow: 3px 3px #000;
top: 12px;
position: relative;
}
nav {
padding: 1%;
overflow: hidden;
float:left;
}
nav a {
float: left;
display: block;
color: #ff8000;
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: #fff;
color: #ff8000;
}
nav .material-icons {
padding-bottom: 5px;
display: none;
font-size: 36px;
color: #ff8000;
}
nav i,nav a ,.index-header h2{
display:inline;
}
@media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
header h2 {
}
}
<html lang="en-us">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet/less" type="text/css" href="styles/style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header class="index-header">
<nav>
<i class="material-icons">menu</i>
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</nav>
<h2>Knox Enterprises Inc.</h2>
</header>