Shifting the menu to the left side of the header for mobile devices: A step-by

I am looking to switch the location of the "hamburger" menu from the right side of the page to the left side. The website in question can be viewed here. This webpage is using the "Bulk" theme. The CSS styling for the icon is as follows:

.open-panel {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 25px;
        left: 22px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 2;
    }
    .shrink .open-panel {
        top: 14px;
    }
    .open-panel span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #000;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .open-panel span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(2) {
        top: 9px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(3) {
        top: 18px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -2px;
        left: 3px;
    }
    .open-panel.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .open-panel.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 3px;
    }

As for the logo on the left side, its styling is as follows:

.site-branding-logo {
    float: left;
}
.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
}
.site-branding-logo img {
    max-height: 70px;
    width: auto;
    padding-right: 10px;
}

Which specific lines need to be modified in order to achieve the desired layout with the menu on the left side and the icon on the right? https://i.sstatic.net/QhpM7.png

htmlcssstyling

Answer №1

If you want to make that change, there are two steps you need to follow.

Firstly, update the .open-panel class for the hamburger style so that it is aligned on the left side by modifying the left attribute instead of its current absolute position.

Secondly, adjust the styling of the logo icon link in the .site-branding-logo a class to align it on the right using the right css attribute.

Below are the code snippets with the necessary changes to achieve this:

.open-panel {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 25px;
    left: 22px;  /* Replace `right` attribute with `left`. */
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 2;
}

.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
    right: 0; /* Align to the right. */
}

Answer №2

To achieve the desired layout, update the .site-branding-logo CSS properties by adding float: right; and deleting right: 22px from the rule 

@media (max-width: 767px) .open-panel
.

If maintaining the logo alignment only for mobile screen sizes is necessary, ensure a specific media query is in place to apply these changes exclusively to smaller devices.

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

Show off on social media but not in person

Check out this HTML snippet: <div class="d-sm-flex flex-sm-row flex-sm-row-reverse"> <div class='ml-2'></div> <div class='ml-2'></div> <div class='ml-2'></div> </div> ...

cssbootstrap-4

Ensure that the logo/header remains fixed at the top of the page at all

Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

The Silent Disregard for CSS Files in React Rendered Pages

I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...

cssreactjs

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

Guide to displaying an input box depending on the selection made in a Mat-Select component

I am working on a mat-select component that offers two options: Individual Customers and Organizational Customers. When selecting Individual Customers, the dropdown should display three options: First Name, Last Name, and Customer Id. However, when choosin ...

htmlangulartypescript

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

How can I show an item repeatedly with each button click in ReactJS?

Currently, I have a setup where I can display a checkbox and its label upon clicking a button. However, the limitation is that only one checkbox can be displayed at a time. Is there a way to modify this so that I can show multiple checkboxes simultaneous ...

javascripthtmlreactjs

What is preventing me from editing the contents of this div?

Hi there, I'm having an issue with changing the content of the "Emps" div in the EmployeeInformation.html file while on the MainScreen.html page. I'm trying to replace the text "DDDDDDDDDDDDDDDDDDDDDD" with the content from the Personal.html file ...

jqueryhtml

Images placed side by side, creating a dynamic and visually appealing layout

Can anyone help me figure out how to display three photos like this? https://i.sstatic.net/wD5At.png The photos cover the full width only if I set the css width: 100vh for all, but then the middle photo becomes disproportionate (black frames show how I wo ...

htmlcssbootstrap-5photo-gallery

Leveraging the HTML Select element for language switching on a diverse website with multiple languages

Prior to this, I had a simple website where users could switch between English and Dutch by clicking on a hyperlink. I had separate files, de.php and en.php, with language arrays like this: de.php <?php $lang = array( "title" => &quo ...

javascriptphphtmljqueryajax

Having trouble getting the Facebook Like Box to function properly

I am having trouble displaying the like box on my website. I followed the code provided at https://developers.facebook.com/docs/plugins/like-box-for-pages and even tried using the HTML5 version, but nothing appears on the page. This is the code I used: & ...

htmlfacebookplugins

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

How to incorporate spacing within table rows using HTML

I am trying to create a table with rows starting from different positions like this 12345 678910 This is my code <table class="center"> <tr style="padding-right: 22%"> <td>1</td> <td>2</td> ...

htmlcssbootstrap-4

Problems encountered with operating the Bootstrap burger menu

After following the Bootstrap navbar documentation and implementing the code in my bs-navbar.component.html file, I encountered an issue with the hamburger menu. Despite everything being set up correctly, clicking on the hamburger icon did not display the ...

htmlcssangularbootstrap-5

Guide on creating an Iframe in HTML with JavaScript

Can someone help me troubleshoot why the following code isn't working to write an iframe into HTML using JavaScript? <html> <body> <script> document.write("<iframe width="560" height="315" src="https://www.youtube.com/embed/9Ow8 ...

javascripthtmliframe

I'm struggling to understand why the background-color is affecting the margins as well

Check out this code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} ...

cssmarginbackground-color

"What's the best way to update the src attribute of an iFrame when a user clicks

I'm new to coding in PHP or JavaScript, so please bear with me if my question isn't quite right. I'm looking for a way to dynamically pass and embed a URL from a link into the src attribute of an iframe. Essentially, I want users to click o ...

javascriptphpjqueryhtmliframe

Revamping Sign-out Design in AdminLTE with ASP.NET

For my dashboard, I am utilizing the fantastic AdminLTE. However, I am facing a small styling issue with the logout functionality as it needs to be a form in ASP.NET Core MVC. Does anyone have any suggestions on how to use a normal anchor tag instead of t ...

cssasp.net-coremodel-view-controllerrazorbootstrap-4

Background Color Not Displaying in CSS3 Preloader Code

Utilizing a CSS3 Designed Preloader for my website with some unique keyframe animations. #preloader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50 ...

htmlcsscss-transitionscss-animationspreloader