I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop screens.
Unfortunately, I have encountered an issue where all menu items align next to each other on all screen sizes, and the 'menubar' div is only as large as the icon.
While the grid functions correctly in other areas of the website, such as sidebars and content sections, I am struggling to implement responsive columns in the header. I am hoping that some of the experts here can provide guidance on this matter.
As a side note, I am working locally with Koala, a processor for the Sass.
Header
<body <?php body_class(); ?>>
<div id="container">
<header class="header" role="banner">
<div id="inner-header" class="wrap ">
<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
<a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf">
<a href="#"><img src="/icon.png"/></a>
</div>
<div id="menu-icon" class="menubar m1of5 t1of5 d1of6 last-col cf">
<a href="#"><img src="/icon.png"/></a>
</div>
</div>
</header>
Grid
@mixin grid-col {
float: left;
padding-right: 0.75em;
}
// the last column
.last-col {
float: right;
padding-right: 0 !important;
}
@media (max-width: 767px) {
.m-all {
@include grid-col;
width: 100%;
padding-right: 0;
}
.m-1of5 {
@include grid-col;
width: 20%;
}
}
Continuing for other sizes and screens.
Style
This is the mobile styling....
.header {
width:100%;
position: fixed;
background-color: $white;
border-bottom: 2px solid $border-color;
}
.menubar {
float: left;
}
#logo {
font-size: 0px;
a {
text-decoration: none;
}
}
#menu-icon {
background-color: $light;
border-radius: 4px;
}