I've just made my first menu header using CSS. I am having trouble aligning them though- I want to align one menu to the right, and the other to the left. Below is an image on how I want it to look:
Here is some of my CSS code:
.main-navigation {
clear: both;
margin: 0.5em auto;
max-width: 2560px;
min-height: 55px;
position: relative;
width: 92%;
}
.navbar {
background-color: #fff;
opacity: 0.8;
margin: 0 auto;
max-width: 2560px;
width: 100%;
position:fixed;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
z-index:9999;
}
.navbar menu2 {
float:right;
}
.navbar img {
z-index: 1000;
width:50px;
height:50px;
position:absolute;
left:50%;
transform: translateX(-50%);
}
My site is here if you want to look at more of the source code.
First of all you want to surround that menu with a
<div>
:Then in your css code you want to use the
float
style to move it to the right, and then usemargin-right
so it doesn't collide with your search button :After you are done with that you want to move the main content down a bit, so I you are going to want to add a margin-top style to the
page-title
class:Make sure you change
85px
with what you are comfortable with. I just put that there because, in my opinion, that is what looks best. What your new header should look like: