Changing position of navbar at mobile view - html

Question

I was wondering if there was a way to change the position of a navigation bar in mobile view by only using CSS3. For example instead of having the navigation bar underneath the top container in mobile view, I would like to have it fixed above the top container. I am using a wordpress theme, Thanks in advanced.
The website is www.capcar.com.au

Answer 1

You may try "transform" property with media rule.

Answer 2

Add css :
#media only screen and (max-width: 767px) {
.navigation_menu {
background: none repeat scroll 0 0 #ffffff;
position: absolute;
top: 0;
width: 100%;
}
.header_section {
background-color: #ffffff;
color: #99ca00;
padding-top: 51px;
width: 100%;
}
}

Answer 3

Flexbox can solve this issue pretty easily. Just add display: flex and flex-direction to #wrapper. Then, inside of a media query, add order: 0 to .header_section and order: -1 to .navigation_menu. This will switch those two around, but leave everything else in the order it was before.
You should be able to just add this to your css:
#wrapper {
display: flex;
flex-direction: column;
}
#media only screen and (max-width:640px) {
.header_section {
order: 0;
}
.navigation_menu {
order: -1;
}
}
var el = document.getElementById("toggle");
el.addEventListener("click", function(){
var menu = document.getElementById('menu');
menu.classList.toggle("show")
}, false);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: flex;
flex-direction: column;
}
header,
nav ul {
display: flex;
max-width: 800px;
width: 100%;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
padding: 1rem 2rem;
}
header {
margin-bottom: 1rem;
}
#logo {
width: 40%;
}
.awards {
display: flex;
align-items: flex-end;
width: 40%
}
#award1 {
width: 25%
}
#award2 {
width: 75%;
}
nav {
background: linear-gradient(to bottom, #e3f5ab 0%, #99ca00 100%);
display: flex;
flex-direction: column;
min-height: 3rem;
}
#toggle {
display: none;
align-self: flex-end;
background: transparent;
border: none;
width: 2rem;
height: 2rem;
margin: .5rem 1rem;
outline: none;
cursor: pointer;
}
nav ul {
list-style: none;
padding: 0 2rem;
}
li {
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
width: 20%;
text-align: center;
}
li a {
display: block;
height: 3rem;
line-height: 3rem;
width: 100%;
text-decoration: none;
color: #02006d;
}
li:hover {
background-color: #ffffff;
}
.caret {
font-size: .6rem;
}
#media screen and (max-width:700px) {
#logo {
width: 70%;
display: block;
margin: 0 auto;
}
#award1 {
display: none;
}
#award2 {
display: none;
}
header {
order: 0;
display: block;
}
nav {
order: -1;
}
#toggle {
display: block;
}
#toggle img {
width: 100%;
}
nav ul {
display: none;
}
nav ul.show {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
width: 100vw;
}
}
<div id="wrapper">
<header>
<img id="logo" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/LOGO-FOR-WEB23.png" />
<div class="awards">
<img id="award1" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/HIA_Logo1.png" alt="" />
<img id="award2" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/MBA_Logo.png" alt="" />
</div>
</header>
<nav>
<button id="toggle"><img src="http://www.tax-consulting-group-san-diego.com/images/taxes-menu-icon.png" alt="" /></button>
<ul id="menu">
<li>Home</li>
<li>About Us</li>
<li>Projects <span class="caret">▼</span></li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
A simple clean demo, and a demo with your site (codepen doesn't like your site, so the header looks weird, but I can't get all the css to load properly—hence the simple demo).
For more info on flexbox here's a snippet from css-tricks and the support tables.
Hope this helps!

Answer 4

Try using the flex property to build your menus. I have great success with this feature and it allows for a number of simple order methods via CSS and media queries. Try CSS-Tricks.com as a reference