Navigation bar elements arranged in a row on mobile devices with HTML

This is the navigation bar for my website using Bootstrap 4:

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
  <a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a href="cars.html" class="nav-link text-light" style="" id="nav_cars">Cars</a>
      <a href="engine.html" class="nav-link text-light" style="" id="nav_engine">Engine</a>
      <button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 0px; right: 15px; top: 11px;">Log Out</button>
    </div>
  </div>
</nav>

Aside from the main title "Car Shop," there are three additional items:

  • Cars (aligned to the left)
  • Engine (aligned to the left)
  • Log Out button (top right corner)

While it looks good on desktop, when switching to mobile view or resizing window accordingly, the three items disappear entirely. Is there a way to enhance the user-friendliness of this navigation bar?

htmlcssbootstrap-4

Answer №1

It seems like the issue lies in using a collapsed navbar without the functionality to expand it once it collapses. I have addressed this by providing a solution for a collapsed menu, which may require some adjustments to your styling:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
          <a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
          <button class="navbar-toggler collapsed" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fa fa-angle-double-down"></i>
          </button>
        
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
              <a href="cars.html" class="nav-link text-dark" style="" id="nav_cars">Cars</a>
              <a href="engine.html" class="nav-link text-dark" style=""id="nav_engine">Engine</a>
              <button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 3em; right: 15px; top: 11px;">Log Out</button>
            </div>
          </div>
        </nav>

If you haven't already done so, consider moving the CSS to a separate file and experiment with using em, vh, vw units instead of px for a more flexible layout.

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

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

Tips on how to update the styling of an active link

http://jsfiddle.net/G8djC/2/ Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the firs ...

javascripthtmlcssclasstabs

Comparing and highlighting words in strings using JavaScript

Seeking assistance with comparing and styling words as shown in the image below: https://i.stack.imgur.com/Ffdml.png I attempted using JavaScript for this task but have not been successful so far. <div class="form-group"> <div class="col-md ...

javascriptjqueryhtml

Pass the value of a variable from one component to another component by utilizing ngModel

I have a scenario where I am working with two components named first and second. The second component is calling the first component. Within the first component, there is a module called matslider that toggles on and off. My goal is to retrieve the status ...

htmlangularangular-materialangular-ngmodel

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

Perform an AJAX request to an encrypted URL with an unverified certificate

I'm experiencing an issue with my site that makes AJAX JSONP calls to a secured (SSL) web server. Everything works smoothly when using an unsecured (HTTP) web server, but once I switch to the SSL version, the call never returns. After checking with Fi ...

javascriptjqueryhtmlsslhttps

jQuery does not have the capability to access the href attribute through DOM manipulation

I've been trying to extract the href attribute from a link in my code and create a new link using that attribute. However, I'm facing an issue where the created link doesn't seem to work properly - it keeps showing a 404 error message like t ...

javascriptjqueryhtml

Experiencing difficulties with the footer design in bootstrap framework

After creating a basic web page, I encountered an issue with the footer. No matter what adjustments I make, the text is not centered and it does not stay fixed when changing the browser height. To view the code snippet and preview, visit: ...

htmlcsstwitter-bootstrapfooter

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui

Choose an image for a better view with the use of HTML and JavaScript/JQuery

Requesting assistance in creating a simple code using plain html5 and JavaScript/jQuery (without plugins) that will enlarge an image upon clicking on it from a list of images. Here is the HTML snippet provided: <!-- Large image holder --> & ...

javascriptjqueryhtml

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

javascripthtmlcsstwitter-bootstrapflask

What might be causing the status problem to not display correctly?

My toggle feature to switch between no issue and issue is not displaying the status correctly. Despite trying to troubleshoot, I can't figure out why the issue section is not showing up. <!DOCTYPE html> <html> <script src="https://aj ...

javascripthtml

Button with embedded Bootstrap dropdown

I need help with centering a dropdown menu on my webpage. I followed the instructions, but it's still appearing next to the button instead of in the center. Below is the code snippet: <div class="btn-group"> <button type=" ...

htmlcssbootstrap-5

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

javascriptjqueryhtmlcss

Arrangement of content in three columns with a flex direction set to column

In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands wh ...

cssbootstrap-4flexboxcss-gridmasonry

Is your jQuery TextEditor not functioning properly?

Having some trouble integrating the jQuery TextEditor plugin into my CodeIgniter project. I'm puzzled as to why it's not functioning properly. Just a heads up, my project also utilizes Bootstrap. Can anyone shed some light on why the plugin is fa ...

jquerycsscodeignitertwitter-bootstrap

Unchanging bottom section with changeable information

I have a unique website design in mind that involves using an image as the background and placing the content within a box. View my website design here However, I am facing an issue with a specific page on this website. The page contains accordion buttons ...

htmlcssoverflow

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

jqueryasp.netcss