The grid feature in the Bones theme is malfunctioning and causing issues

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;
  }

Answer №1

<div id="logo" class="menubar m1of5 t1of5 d2of6 cf">
    <a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>

Your CSS class names need to be hyphenated:

<div id="logo" class="menubar m-1of5 t-1of5 d-2of6 cf">
    <a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

Issue with displaying options in Angular2 v2.4.9 HTML select element

Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner. However, the pr ...

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

jQuery preventing form submission after returning false

There's a small issue that I need help with. After submitting the form and receiving a false response, it prevents resubmission. For example, if a user forgets to input their name, they will see an error message asking them to do so. However, the u ...

Ways to implement multi-file loading on a website using separate HTML segments

Currently, I am working on a website for my local community. Each page contains similar content like header, navigation bar, and footer. I want to streamline this process by storing these common elements as separate HTML files. Is it possible to link the ...

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

I need to verify if the php code being executed is located within a div named "parent2". Currently, I am customizing a Joomla HTML override and attempting to place one module in two different positions. If the module is contained within parent2, then spe ...

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

The directory structure does not align with the 301 redirect

I recently transitioned my website from HTML to a CMS platform. The new CMS does not include any file extensions in the URLs, so I have maintained the same URL structure from my old HTML site. Here is an example of the difference: HTML site URL: www.sit ...

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

Is there a way to alter visibility once a radio button has been selected?

I have a shape resembling a cube with 4 faces, all of which are currently visible. However, I would like to hide the other 3 faces when one face is showing. For example: I attempted setting the opacity of the other cube sides to 0 when the first radio but ...

Tips for utilizing Selenium to acquire links from a webpage

Is it possible to retrieve the link location of a web element in Selenium? While we can easily obtain the text from a web element and use getAttribute("href") method to get the location of a hyperlink, my need is to extract all the links present. For insta ...

The button labeled "modify layout" remains unresponsive when activated

Allow me to start by saying that I am not a coding expert. Currently, I am enrolled in a computer science class and have a basic understanding of HTML, CSS, and some Javascript. However, I have encountered a problem that I cannot solve. When I click on th ...

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

How do I retrieve the content within this HTML element using JavaScript based on its ID?

Is there a way to extract the string from this specific HTML element using JavaScript? The element has an id of recItemString_GPLA\|input, and within it, there is a string containing "qty" that I need to retrieve. Upon inspection of the element, the f ...

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

What is the process for detaching and attaching click animations using the on() method?

I am encountering an issue with a recursive loop that executes a simple animation. These animations are controlled by the page load and clicking on controls .carousel_item. Click here for live sample JSFiddles for demonstration purposes Challenge: The pr ...