Position the label to float on the right side and be centered vertically

I have successfully implemented a navigation bar, but I am facing an issue where the 'menu toggle' button does not align on the right side of the screen when the screen width is 768px or less. Instead, it appears right after the image. (Refer to my example for clarification).

Is there a way to make the <label class="menu-icon"> float to the right of the page on screens smaller than 768px? I have attempted using 'float: right', but that disrupts the vertical alignment which needs to remain centered vertically.

My attempts below did not yield the desired outcome:

.nav-widget .header .menu-icon {
    position: absolute;
    right: 0px;
}

or 

.nav-widget .header .menu-icon {
    float: right;
}


.nav-widget {
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  z-index: 9999;
}
.nav-widget .header {
  display: table;
  width: 100%;
  position: relative;
}
.nav-widget .header .left-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.nav-widget .header .right-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

/* How can I align this on the right? */
.nav-widget .header .menu-icon {
  cursor: pointer;
  vertical-align: middle;
  display: none;
  right: 0px;
}
.nav-widget .header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
.nav-widget .header .menu-icon .navicon:before,
.nav-widget .header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
.nav-widget .header .menu-icon .navicon:before {
  top: 5px;
}
.nav-widget .header .menu-icon .navicon:after {
  top: -5px;
}
.nav-widget .header .menu-btn {
  display: none;
}
.nav-widget .header .menu-btn:checked ~ .right-nav {
  max-height: 240px !important;
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .right-nav > .widget {
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (max-width: 768px) {
  .nav-widget .header .left-nav {
    display: inline-block; /*table-cell;*/
  }
  .nav-widget .header .menu-icon {
    display: inline-block; /*table-cell;*/
  }
  .nav-widget .header .right-nav {
    clear: both;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 !important;
    display: none;
    background-color: red;
    text-align: center;
  }

  .nav-widget .header .right-nav a {
  display: block;
  }
}
<div class="nav-widget">
<nav class="header">  

<div class="left-nav">
<img src="https://via.placeholder.com/140x100">
</div>

<input class="menu-btn" type="checkbox" id="menu-btn" />  
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 

<div class="right-nav">
<a href="#"><span>Press Me</span></a>
<a href="#"><span>Press Me</span></a>
</div>
</nav>
</div>

<p>The menu toggle button should be positioned on the right side of the page, not immediately after the image.</p>

htmlcss

Answer №1

Here is a solution using the position: absolute property on the .menu-icon element:

.nav-widget {
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  z-index: 9999;
}
.nav-widget .header {
  display: table;
  width: 100%;
  position: relative;
}
.nav-widget .header .left-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.nav-widget .header .right-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.nav-widget .header .menu-icon {
  cursor: pointer;
  vertical-align: middle;
  display: none;
  right: 0px;
}
.nav-widget .header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
.nav-widget .header .menu-icon .navicon:before,
.nav-widget .header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
.nav-widget .header .menu-icon .navicon:before {
  top: 5px;
}
.nav-widget .header .menu-icon .navicon:after {
  top: -5px;
}
.nav-widget .header .menu-btn {
  display: none;
}
.nav-widget .header .menu-btn:checked ~ .right-nav {
  max-height: 240px !important;
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .right-nav > .widget {
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (max-width: 768px) {
  .nav-widget .header .left-nav {
    display: inline-block;
  }
  .nav-widget .header .menu-icon {
    display: inline-block;
    position: absolute; /* Add this position absolute */
    
    /* Add extra 'margin' */
    top: 50%;
    right: 1em;
  }
  .nav-widget .header .right-nav {
    clear: both;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 !important;
    display: none;
    background-color: red;
    text-align: center;
  }
<div class="nav-widget">
<nav class="header">  

<div class="left-nav">
<img src="https://via.placeholder.com/140x100">
</div>

<input class="menu-btn" type="checkbox" id="menu-btn" />  
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 

<div class="right-nav">
<a href="#"><span>Press Me</span></a>
<a href="#"><span>Press Me</span></a>
</div>
</nav>
</div>

<p>The menu toggle button should be positioned on the right side of the page, not directly next to the image.</p>

Answer №2

Ensure these styles are applied to the .nav-widget .header class.

  .nav-widget .header{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
 }
@media (max-width: 768px)
.nav-widget .header .right-nav {
    clear: both;
    position: absolute;
    top: 100%;
    width: 100%;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 !important;
    display: block;
    display: none;
    background-color: red;
    text-align: center;
}

Hopefully, this meets your expectations.

Demo:

.nav-widget {
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  z-index: 9999;
}
.nav-widget .header {
  display: flex;
  width: 100%;
  justify-content:space-between;
  align-items:center;
  position: relative;
}
.nav-widget .header .left-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.nav-widget .header .right-nav {
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

/* How can I align this on the right? */
.nav-widget .header .menu-icon {
  cursor: pointer;
  vertical-align: middle;
  display: none;
  right: 0px;
}
.nav-widget .header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
.nav-widget .header .menu-icon .navicon:before,
.nav-widget .header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
.nav-widget .header .menu-icon .navicon:before {
  top: 5px;
}
.nav-widget .header .menu-icon .navicon:after {
  top: -5px;
}
.nav-widget .header .menu-btn {
  display: none;
}
.nav-widget .header .menu-btn:checked ~ .right-nav {
  max-height: 240px !important;
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .right-nav > .widget {
  display: block;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.nav-widget .header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-widget .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (max-width: 768px) {
  .nav-widget .header .left-nav {
    display: inline-block; /*table-cell;*/
  }
  .nav-widget .header .menu-icon {
    display: inline-block; /*table-cell;*/
  }
.nav-widget .header .right-nav {
    clear: both;
    position: absolute;
    top: 100%;
    width: 100%;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 !important;
    display: block;
    display: none;
    background-color: red;
    text-align: center;
}

  

  .nav-widget .header .right-nav a {
  display: block;
  }
}
<div class="nav-widget">
<nav class="header">  

<div class="left-nav">
<img src="https://via.placeholder.com/140x100">
</div>

<input class="menu-btn" type="checkbox" id="menu-btn" />  
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 

<div class="right-nav">
<a href="#"><span>Press Me</span></a>
<a href="#"><span>Press Me</span></a>
</div>
</nav>
</div>

<p>The menu toggle button should sit on the right side of the page, not immediately next to the image.</p>

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

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

htmlcss

I am interested in developing a program using Javascript or JQuery that can effectively capture the anchor text within <a></a> link tags

I want to automatically capture the link on my website and create a system where, when users click on a specific link, it opens the captured link in a new tab without requiring browser permission and replaces the current tab with a different link. For exa ...

javascripthtmljquery

The pair of divs with distinct backgrounds

Looking to customize the navigation on my website by creating a separate background for the list links menu and making sure the left part of the navigation with the logo has its own distinct background that extends until the next div. I've experimente ...

htmlcss

What is the best way to implement a seamless left-to-right sliding effect for my side navigation using CSS and Javascript?

I am currently working on creating a CSS and JavaScript side navigation. Below is the code that I have implemented so far: var nav = document.getElementById('nav'); function show(){ nav.style.display = "block"; } .side-nav{ background-color:bl ...

javascripthtmlcss

Leverage the greater than operator within an AngularJS controller

This is the data stored in my controller: $scope.data = [{ "F": "1,26,000" }]; $scope.data2 = [{ "F": "26,000" }]; Now I want to implement an if-else condition using this data: if (Number($scope.d ...

htmlangularjsscopeoperand

How can I delete a CSS class from an element?

Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...

cssjquery-ui

How to toggle a specific element in Bootstrap 4 with a single click, without affecting other elements

I've been struggling with a frustrating issue: I have 3 elements next to each other at the bottom of the fixed page. I tried using Bootstrap4 toggles to display only text when a user clicks on an image, but it ends up toggling all the images instead o ...

htmlcssbootstrap-4toggle

What measures can be taken to restrict users from inputting decimal values?

My website includes an order page where users can input quantities for various items. While some items allow for decimal quantities, others do not. What is the most effective method to restrict users from entering decimal quantities? (Besides using an ale ...

javascripthtmldecimal

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

javascriptcssreactjsmaterial-uireact-flow

Attempting to integrate AngularJS with the CodeIgniter framework

I am currently facing an issue while trying to integrate AngularJS with Codeigniter. Despite not receiving any errors, the data is not displaying as expected. I am eager to learn how to develop a RESTful application using AngularJS and Codeigniter. If anyo ...

htmlangularjscodeigniter

The color "clear" is not functioning as intended

Having an issue with Internet Explorer (typical, right?): The problem arises when I try to generate content with CSS that includes a background-image. Here's what it looks like: #nav ul li:after { content: "--"; position: relative; z-ind ...

cssinternet-explorercss-content

Implement transition effect on collapsible div with styled-components in React

I am attempting to develop a straightforward collapsible div using styled-components within a react project. While I have successfully managed to toggle the div's open and close state based on certain conditions, I am facing difficulties in implement ...

cssreactjsstyled-components

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

Is there a way to dynamically update the text in an HTML element with a randomly generated value using JavaScript?

Currently, I am working on a coding project where I am attempting to create a flip box that reveals the name of a superhero from an array when clicked by a user. The code pen link provided showcases my progress so far: https://codepen.io/zakero/pen/YmGmwK. ...

javascripthtmlcss

As I scroll, I wish for the search bar to remain fixed at the top of the

Help needed! I'm currently working on a website for a client, and they want the search bar to stay fixed as users scroll down. I've been struggling with this task and can't seem to get it right. Any assistance would be greatly appreciated. T ...

htmlsearchbar

Background color for the DIV is not displaying properly when it is set to the

While trying to set the background color of a div to light blue #2390bb, I encountered an issue. Even though I have already set the body background color to Light Grey#D6D6D6, the light blue color doesn't display in the div. Can anyone help me figure ...

csshtmlcolorsbackground

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

I have encountered an issue where the first textarea value is being copied into the second textarea because I am using the same id for the 'add more' functionality. Below is the code snippet: <div id="divShortAnswerOption_Templated"> & ...

javascriptjqueryhtml

What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Recently, I came across and was intrigued by the "image slide effect" featured on their homepage. The way the background image changes as you scroll up, leading you through different introductory slides before reaching the main content of the site caught ...

javascriptjqueryhtmlcss

Accessing the parent element within a hover declaration without explicitly naming it

I am facing a challenge with three nested divs, where I want to change the color of the children when the parent is hovered. However, I prefer not to assign a specific class name to the parent element. The issue arises because the children have their own ...

cssreactjs

How can I resize my image to match the dimensions of the navigation bar?

Is there a way for me to match the width of my navigation bar with that of an image? The issue I'm facing is that the original size of the image is 497 x 298px, and in order to stretch it across the full width of the page while maintaining margins of ...

htmlcssnavigationimage-resizingresponsive