I am experiencing difficulty with the search bar placement in the WEB browser view, as I would prefer it to be located in the right corner

I am currently working on a webpage project to enhance my skills, but I'm encountering an issue with the placement of the search bar. Unfortunately, the search bar is not aligning correctly on the right side of the header section. Despite ensuring responsiveness through media queries, the problem persists.

function toggleSidebar() {
  var sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('sidebar-collapsed');
}
/* General styles */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #e9e9e9;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-search-bar {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  color: #333;
  margin-right: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
}

.search-bar input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-bar button {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  height: 100%;
}

.search-bar button i {
  margin-right: 5px;
}


/* Sidebar styles */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: #fff;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar-collapsed {
  width: 0;
}

.sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.nav-collapsed {
  opacity: 0;
  pointer-events: none;
}

.sidebar nav ul li {
  margin-bottom: 10px;
}

.sidebar nav ul li a {
  color: #fff;
  text-decoration: none;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  margin-right: 10px;
}

.sidebar-collapse {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
}


/* Content styles */

.content {
  margin-left: 200px;
  padding: 20px;
  text-align: left;
}


/* Media query for small devices */

@media screen and (max-width: 480px) {
  .toggle-search-bar {
    justify-content: flex-start;
    margin-left: 10px;
  }
  .search-bar {
    order: 1;
    margin-left: 10px;
  }
  .sidebar {
    width: 0;
  }
  .sidebar-collapsed {
    width: 200px;
  }
  .sidebar-toggle {
    display: block;
  }
  .sidebar-collapse {
    display: block;
  }
  .content {
    margin-left: 0;
  }
}


/* Media query for larger devices */

@media screen and (min-width: 481px) {
  .toggle-search-bar {
    justify-content: flex-end;
  }
  .search-bar {
    order: 2;
    margin-right: 10px;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<header>
  <div class="toggle-search-bar">
    <button class="sidebar-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></button>
    <div class="search-bar">
      <input type="text" placeholder="Search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </div>
  </div>
</header>

<div class="sidebar">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <button class="sidebar-collapse" onclick="toggleSidebar()"><i class="fa fa-times"></i></button>
  </nav>
</div>

<div class="content">
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu arcu sit amet nisl tincidunt consequat id eu lacus.</p>
  </section>
</div>

javascripthtmlcss

Answer №1

<header>
    <div class="toggle-search-bar">
      <button class="sidebar-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></button>
      <div class="search-bar">
        <input type="text" placeholder="Search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </div>
    </div>
  </header>

Moved the search-bar div outside of the toggle-search-bar div and after the sidebar-toggle button.

<header>
    <div class="toggle-search-bar">
      <button class="sidebar-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></button>
    </div>
<div class="search-bar">
        <input type="text" placeholder="Search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </div>
  </header>

Answer №2

Your issue arose from using the flex property. When a parent container has flex, child elements do not automatically expand full-width as a typical block element would.

Instead, you need to explicitly define which items in a flex container should expand (or shrink).

I resolved the problem by removing the unnecessary .toggle-search-bar element and style, and adding two rules to the .search-bar class to instruct the browser to expand it and align the content to the right.

function toggleSidebar() {
      var sidebar = document.querySelector('.sidebar');
      sidebar.classList.toggle('sidebar-collapsed');
    }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #e9e9e9;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  color: #333;
  margin-right: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: right;
}

.search-bar input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-bar button {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  height: 100%;
}

.search-bar button i {
  margin-right: 5px;
}

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: #fff;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar-collapsed {
  width: 0;
}

.sidebar nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.nav-collapsed {
  opacity: 0;
  pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
  <title>Responsive Website</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <header>
    <button class="sidebar-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></button>
    <div class="search-bar">
      <input type="text" placeholder="Search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </div>
  </header>

  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button class="sidebar-collapse" onclick="toggleSidebar()"><i class="fa fa-times"></i></button>
    </nav>
  </div>

  <div class="content">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu arcu sit amet nisl tincidunt consequat id eu lacus.</p>
    </section>
  </div>
 </body>
 </html>

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

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...

javascriptjqueryhtmlcss

Are you a fan of Ajax calls using JSON or HTML?

Which method is most recommended for implementing AJAX? If you were developing a search page using PHP and Jquery for the AJAX calls, how would you manage the response? a) Would you prefer to have the response include all relevant HTML and styling? or ...

jqueryhtmlajaxjson

bindings and validation of input values in angularjs

In my scenario, I am dealing with a dynamic regExp and unique masks for each input. For instance, the regExp is defined as [0-9]{9,9} and the corresponding mask is XXX-XX-XX-XX. However, when it comes to Angular's pattern validation, this setup is con ...

javascriptangularjs

Is it possible to implement a single OrbitControls with two cameras in ThreeJS?

Is there a way to link the OrbitControls of two canvases on the same page? For example, if the user zooms in on one canvas, I want the other canvas to also zoom in simultaneously. How could I achieve this synchronization between multiple canvases? ...

javascriptthree.js

jquery quicksearch component for searching is malfunctioning

Utilizing a jquery plugin known as quicksearch to filter a list of comments. Below is an excerpt from the markup: <ol class="commentlist"> <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="li-com ...

javascriptjqueryjquery-pluginsquick-search

To achieve smoother transitions when concealing content, ensure the divs are programmed to

I have successfully implemented code that removes a div and animates the content inside to create a sliding effect. However, I am facing an issue where the divs below seem to jump up and I am looking for a way to make this transition smoother. Here is the ...

javascriptjqueryhtmlcss

Tips for Optimizing Video Content for Mobile Devices

Upon reviewing the first image, it is evident that the video is displaying correctly: https://i.sstatic.net/EbQyM.png However, in the mobile version, the poster does not show up. Only a play button is visible. Moreover, even when the play button is click ...

htmlcssvideomobile

Using Next.js to pass fetched data as props to components

I am currently working on integrating a leaflet map into my Next.js project. The map display is already functioning with predefined latitude and longitude in the component. However, I now need to show data retrieved from my API as the longitude and latitu ...

javascriptreactjsnext.jsleafletcomponents

Utilizing Jquery Ajax to send a post request containing input values through Tampermonkey

I encountered an issue with my code - even though the logs in console show that it is working, I am unable to send the values to my server using AJAX post. jQ(document).on("keyup", "form input", function () { var value = jQ(this).val(); ...

javascriptjqueryajaxposttampermonkey

How to implement hover effects using CSS classes for mouse enter and mouse leave functionality

I have a CSS class called "box" that I am utilizing in my project. .box { margin: 5px; padding: 5px; display: inline-block; width: 240px; height: 290px!important; background-color:#FDFEFE; text-align: center; vertical-align ...

htmlcssangularjs

What is the best way to delete a particular CSS class using jquery?

My task is to remove the "btn" class from items that have an additional argument in their class name, such as: <input type="button" class="btn btn-mini btn-success email-user" id="emailid5" value="Email Tester"> I specifically need to only remove t ...

javascriptjquery

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

How to Extract Content from a Different Website Using jQuery's $.post() Function

When using the load() method in jQuery, you can retrieve a specific part based on a class or ID of an element. For example: $( "#result" ).load( "ajax/test.html #container" ); This code snippet will load the content found within the #container element. N ...

javascriptjqueryjquery-selectors

Harnessing the power of dynamic scope variables within an ng-if statement

I am trying to implement ng-if directives based on the values of "male", "female" or "all". However, when using data-ng-show, the values are working fine as true and false for AnswerList2[index][GenderTypeAnswer]. I want to achieve this without displaying ...

javascriptangularjs

Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile device ...

htmlcssflexboxresponsive

Tips on how to reach an Angular component within a third-party library

I'm currently working on a web application that incorporates the Deezer player through the official JS SDK. I've run into an issue where I am unable to access my Angular component from within the Deezer event subscription. The arrow function does ...

javascriptangulartypescriptdeezer

Tips for testing a function that calls other functions during unit testing

Exploring jest for the first time to test my REST API has been quite the learning experience, especially when it comes to unit testing the controllers. I'm facing a challenge in testing a function that involves calls to other functions (including npm ...

javascriptnode.jsmockingjestjs

Creating a new image by converting canvas to an image and displaying it in a separate window with Ruby on Rails and

I'm having some trouble with this issue and would really appreciate your help. My goal is to convert a canvas into an image using toDataURL when a link, button, or image is clicked. Once the image is generated, I want it to open in a new window. Can ...

javascriptruby-on-railsimagecanvas

Extracting HTML content from a text

var parse = new DOMParser(), d = parser.parseFromString('<?xml version="1.0"?><div class="a">Hello</div>', 'application/xhtml+xml'); console.log(d.querySelector('*')); console.log(d.querySelector(&a ...

javascriptajax

I am unable to locate the appropriate TypeScript type for the `displayName` attribute when it is used as a prop for the `type` component

Having trouble finding the correct type as mentioned in the title. After inspecting with DevTools, I have confirmed that every component I am programmatically looking at has Component.type.displayName. For anything that is not an ElementType, the type is a ...

javascriptreactjstypescripttype-conversion