Centering the Brand in Bootstrap 4 Navbar Flex causing Flex to Break

My brand logo is currently centered, with two menus on the left and right sides. However, when viewing my website on a mobile device, I am facing some challenges in moving the left-hand search menu item to the right side. It seems that it's not flexing properly and is wrapping to a new line.

<nav class="navbar navbar-expand-lg navbar-light">

  <button class="navbar-toggler" type="button">
    <i class="material-icons">menu</i>
  </button>

  <a class="navbar-brand mx-auto" href="/">
    <img src="logo.svg" height="25" class="d-inline-block align-top">
  </a>

  <div class="navbar-collapse" id="navbarNav">
     <ul class="navbar-nav mr-auto">
         <li class="nav-item d-none d-sm-none d-md-block">
             <a class="nav-link" href="#" id="searchToggle">
               <i class="material-icons">search</i>
             </a>
         </li>
     </ul>
     <ul class="navbar-nav ml-auto justify-content-end">
         <li class="nav-item search-mobile d-block d-sm-block d-md-none">
             <a class="nav-link" href="#" id="searchToggle">
               <i class="material-icons">search</i>
             </a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Father's Day</a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Stores</a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Join</a>
         </li>
     </ul>
 </div>


</nav>

I have two search menus because the location of one changes on different screen sizes. Is this the correct approach?

htmlcssflexboxbootstrap-4

Answer №1

When faced with a Bootstrap issue, here is my solution that may prove useful to you. To begin, I included a custom class called "move" to the parent UL element.

</ul>
 <ul class="navbar-nav ml-auto justify-content-end move">
     <li class="nav-item search-mobile d-block d-sm-block d-md-none">
         <a class="nav-link" href="#" id="searchToggle">
           <i class="material-icons" id="search">search</i>
         </a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Father's Day</a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Stores</a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Join</a>
     </li>
 </ul>

Next, I styled the parent ul element with the "move" class by setting its position to relative. Additionally, I applied a media query to adjust the search icon to the top right corner of the screen.

ul .move {
  position: relative;
}

@media (max-width: 992px) {
#search {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
 }
}

I hope this solves your problem!

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

Sophisticated spreadsheet - Pinpointing particular <TR>

With my current setup, I have a complicated table that results in a simple layout. Unfortunately, changing the HTML output is not an option for me right now. So, I am experimenting with jQuery: <div id="contentDiv" class="mainContent"> <table c ...

jquerycss

What is the best way to transfer variables between HTML and PHP?

Greetings! I have a quick query: What is the best practice for transferring variables while developing on your website? - get method, post method, session, cookies, hidden fields, etc. ...

phphtmlvariableswebparameter-passing

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

javascriptcssreactjsmaterial-uistyled-components

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

javascripthtmlangularjsnode.js

Is it possible for an AngularJS controller to connect a scope variable within it to an HTML file, and then utilize the variable to display content in the HTML file?

When exploring directives, I came across examples of rendering an entire HTML file within the directive. There are also instances where controllers render HTML snippets as scope variables, enclosed in single quotation marks - like $scope.items = '&l ...

htmlangularjstemplatescontrollerrender

Could routerLinkActive be used to substitute a class rather than simply appending one?

I have a navigation bar icon that links to an admin route. I want this icon to change its appearance when on that specific route. To achieve this, I can simply replace the mdi-settings-outline class with mdi-settings, displaying a filled version of the sam ...

cssangularangular2-directivesangular-router

A Guide to Sorting Tables in Bootstrap 4: Customize Arrow Icons to Change Color Depending on ASC or DESC Order

I need help sorting a table in ascending and descending order. Specifically, I want the fa-sort-asc icon to be highlighted when clicked, while the fa-sort-desc icon should be greyed out, and vice versa. I have tried using Bootstrap 4 and datatables but c ...

bootstrap-4datatablestablesorter

Is it possible to modify an HTML document on the server side using Node.js?

I am currently working on a website project. As part of this project, there is a Python script that is activated by the user through the UI and runs on the server to generate HTML files. These HTML files are then read by the node server and sent in full to ...

javascriptjqueryhtmlnode.jsexpress

Issues with receiving incorrect orders and implementing switch case statements in JavaScript

Attempting to utilize a switch-case structure based on months. For example, if the user selects 1, it should display January. The months are stored in an array where arr[0] = January. However, when selecting 1 from the dropdown, it displays "january" inste ...

javascripthtml

Issues with the output of files uploaded on GitHub

Why is it that every time I upload my project file to GitHub, the output size increases significantly compared to when viewing it on the VS Code Go-Live server? This discrepancy seems to occur consistently across all of my project files. Can anyone expla ...

htmlcssvisual-studio-codegithubbootstrap-5

The scroll-to-top feature fails to function properly within the framework of Bootstrap 4

I have encountered an issue with adding a scroll to top script to my website developed using Bootstrap 4. Strangely, the script works perfectly fine on another website built with Bootstrap 3. It seems like there might be an error related to the bootstrap v ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Error: Attempting to assign a value to the 'firstData' property of an object that is undefined

I am encountering two identical errors in my service. Below are the details of my service and controller: Service code snippet: getData: function (dataRecievedCallback, schemeid, userid) { //Average JSON api averageData = functi ...

javascripthtmlangularjsexpression

Validation failures frequently occur in the typeahead feature of Angular 2 when using Bootstrap 4, despite a value being selected

I need to implement an auto-complete feature using Bootstrap Typeahead in a form I am currently working on. <input [(ngModel)]="model.brand" [typeahead]="model.brands" ng-model-options="{'updateOn': 'blur'}" (typeaheadOnSele ...

angularjsangularbootstrap-4

How can I modify the color of this navigation bar in Bootstrap using my own custom CSS stylesheet?

I am having trouble changing the color of the navbar in my bootstrap project. Here is the HTML code for the nav bar: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Tw ...

htmlcssbootstrap-4

Positioning a div within another div using values from a textarea - a step-by-step guide

Check out this script I have: HTML <div id="left"> <div>Orange Div</div> <div> <div class="left_text">top</div> <div class="left_text">left</div> <textarea class="count2"> </textarea& ...

jquerycss

How can you use JavaScript to determine the width of a CSS element?

Is there a way to make the VarDisk2 element disappear when the width of VarDisk1 exceeds 70? <script> var VarDisk1 = document.querySelector("Disk1"); var VarDisk2 = document.getElementsByClassName("Disk2"); ...

javascripthtmlcsspure-js

Ensuring the same height for the navigation bar and logo with aligned vertical text

I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the midd ...

htmlcss

Extracting content from concealed elements with Selenium in Python

I am currently using the Python Selenium library to scrape data from a website, but I am encountering an issue. When I click on the website to retrieve additional rows from a table, those rows appear with the classes hidden-xs hidden-sm, which makes it cha ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Instructions for creating a nested list using a delimited string or an array:

Here are the results from my SQL query: Maths Maths|Algebre Maths|Algebre|Algebre 1 Maths|Algebre|Algebre 2 Maths|Algebre|Algebre 3 Maths|Analyse Maths|Analyse|Analyse 1 Maths|Analyse|Analyse 2 Maths|Probabilité physics I have tried various methods to c ...

phphtmlarraysrecursion

Place the written content above a div element

Having trouble placing a text/title on top of a div. I've highlighted the issue in red in the image, but can't seem to figure it out. Check out my image This is my code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlcssbootstrap-5