The Bootstrap 4 Navbar features a logo aligned to the left and a menu positioned to the right on desktop screens, while on mobile

I'm currently struggling to position my logo and menu correctly on desktop. I want to display my logo on the left and menu on the right, and on mobile I want the logo to be on top and the menu centered. Here's my code:

<nav class="navbar navbar-expand" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="assets/new_images/logo1.png" width="210px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">

            <li class="nav-item">
              <a class="nav-link" href="help.php">Help</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="status.php">Status</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="logout.php">Logout</a>
            </li>

      </ul>
    </div>
  </div>
</nav>
htmlcssbootstrap-4navbar

Answer №1

Learn how to use flexbox with bootstrap 4. You can easily adjust the layout for different screen sizes by setting the default to flex-column and then switching to flex-sm-row for smaller screens.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark flex-column flex-sm-row">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
</body>

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

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

I'm facing an issue with the multi-select box. I attempted to choose multiple values using jQuery, but only the last one seems to be selected. Can someone assist me, please? Below is my code: <script> $(function(){ <?php foreach ($selectd ...

phpjqueryhtml

Error in Angular timer causing NaN result

Struggling to create a timer in JavaScript, a basic one at that. I wrote what I thought was correct code, but it's not functioning properly - resulting in the textbox value changing to NaN after just one second. Below is the code snippet: <timer ...

javascripthtmlangularjsionic-framework

The Challenge of a Chess Board that Adjusts to Different

Looking at the demonstration below, it's clear that the chessboard adjusts properly to a width of no more than 512px while adapting to different devices. The pieces also resize accordingly with the board. However, I'm encountering an issue when a ...

csshtmlresponsive-design

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

csssassnext.jscss-loader

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

Tips for eliminating the default hover and active states from a textfield in Material UI

Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed. Below is my password textfield: (https://i.st ...

cssreactjsmaterial-ui

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the ...

javascriptjqueryhtmlcssjquery-ui

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

javascripthtmlcss

An HTML/CSS component that dynamically adjusts its height at random intervals

My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...

csstwitter-bootstrap

Is it possible to remove content from a Content Editable container?

JSFiddle <div contenteditable="true"> <p>Trying out editing capabilities of this paragraph.</p> <figure> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/ima ...

javascriptjqueryhtml

Positioning of CSS elements: Distributing and arranging 4 divs evenly within a single parent div

Is there a more efficient method? div { border: 2px solid black; } #main { width: 107px; height: 107px; padding: 0; text-align: center; font-size: 10px; } #tl, #tr, #bl, #br { position: relative; width: 45px; height: 45px; } #tl { t ...

htmlcssuser-interfacepositioning

Animate the expansion and shrinkage of a div instantly using jQuery

I am trying to create an animation effect using jQuery animate on a div element where it starts large and then becomes smaller. Here is the code I have written: $(this).animate({ opacity: 0, top: "-=100", width: "38px", height: "32px" }, 1 ...

javascriptjquerycss

Design an interactive div element that allows users to modify its content, by placing a span

Here is an example of the desired effect: ICON LINE - 1 This is some sample text inside a div element and the next line should begin here ICON LINE - 2 This is some sample text inside a div element a ...

javascripthtmlcss

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Is it possible to alter the appearance of my menu when clicked on?

Is there a way to update the appearance of an active menu or submenu that is selected by the user? I would like the chosen submenu and its parent menu to have a distinct style once clicked (similar to a hover effect, but permanent). /*jQuery time*/ $(do ...

javascriptphpjqueryhtmlcss

Issue with rendering components list in React.js

I am currently working on a project using React, and I'm facing an issue where my list is not displaying on render(). In my parent component, I have a list of components coming from SearchResult. Below is the relevant portion of my code: class Create ...

javascripthtmlreactjscomponents

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...

javascripthtmlcss

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

javascriptjqueryhtmlcheckbox

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

javascriptjqueryhtml