Removing logo from a collapsed navigation bar: [Bootstrap/HTML]

My goal is to ensure that the website logo is prominently displayed in the center of the navigation bar when users are on a desktop. However, I also want the logo to shift to the top right of the screen and the navbar activation button to move to the left when users are on a mobile device. Currently, the logo remains in the center position, causing it to be included in the collapsed navbar. How can I prevent this from happening?

        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                    <div class="navbar-nav justify-content-center">
                        <a class="nav-link" href="index.html">Home</a>
                        <a class="nav-link" href="#">About</a>
                        <img src="logo.png" alt="" width="100" height="45" style="position: absolute; top: 0; right: 0">
                        <a class="nav-link" href="#">Portfolio</a>
                        <a class="nav-link" href="#">Contact</a>
                    </div>
                </div>
            </div>
        </nav>

Any assistance would be greatly appreciated.

htmlcssbootstrap-5

Answer №1

To my understanding, approaching this issue would involve the following steps:

Firstly, apply the d-none d-lg-block classes to the middle logo img tag to ensure it only displays on desktop.

Next, include a duplicate img as the last item in your .container-fluid and add d-block d-lg-none classes to make it visible on mobile but hidden on desktop.

Then, add the flex-nowrap class to your nav tag to ensure the logo appears inline with the toggle button.

Lastly, add the align-self-start class to the duplicate/mobile img to keep it inline with the toggle button when the nav is open.

This configuration should resemble the following structure:

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
      <div class="navbar-nav justify-content-center">
        <a class="nav-link" href="index.html">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
      </div>  
    </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

Example on Codepen

Does this align with your requirements?

[UPDATE]

Noticing your usage of Bootstrap 5, I have introduced a .text-end container wrapping the button.nav-togger and .navbar-collapse, along with additional utility classes for styling purposes.

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap flex-row-reverse">
  <div class="container-fluid navbar justify-content-end justify-content-lg-center">
   <div class="text-end">
      <button class="navbar-toggler mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="navbar-nav container-fluid justify-content-center p-0">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
        
      </div>  
    </div>
   </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

Using Bootstrap 5: Example on Codepen

Answer №2

Here is an alternative method that eliminates the need to duplicate the logo. To prevent the logo (or any other content) from being included in the collapsible navbar, it should be taken out of the navbar-collapse div...

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
            <ul class="navbar-nav ms-auto text-center">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
        <div class="mx-lg-auto my-2 order-0 order-md-1 position-relative">
            <a class="mx-auto" href="#"><img src="//via.placeholder.com/50/ccff00" class="rounded-circle"></a>
        </div>
        <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
            <ul class="navbar-nav me-auto text-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

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

Tips for making a dynamic active button using javascript

I'm trying to create a toggle button with eight buttons. When seven out of the toggle buttons are clicked, it should toggle between two classes and change its CSS styles. If the daily button is clicked, it should toggle the styles of the other seven b ...

javascripthtmlcss

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

Tips for incorporating a set offset while utilizing the scrollTop() function

I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...

javascriptjqueryhtmlcsstwitter-bootstrap

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the ...

javascriptjquerycssflickerouterheight

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

htmlcss

Struggling to eliminate unwanted space with CSS styling

Despite my efforts with Google Chrome and inspecting elements, I've been unable to eliminate an irritating space. I also experimented with Firebug and attempted to modify properties in the header, headercontainer, etc. The screenshot showing the spa ...

htmlcss

Several different forms are present on a single page, and the goal is to submit all of the data at

Looking for assistance with combining Twitter and Google data entry at once. Here's the code I've developed: Please guide me on how to submit Twitter and Google details together. <html> <head> <script type="text/javascript">< ...

javascripthtmlforms

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

Find images by specific dimensions

A while ago, I received assistance in creating a function that searches for images on Google with specific preset sizes. Now, I am interested in modifying this HTML5 code to allow users to input their desired image size instead of using a preset one. For ...

htmlimagesearchgoogle-image-search

Instructions for using jQuery to replace the final <a> tag within a specific section

Here is a section that I am working with: <section class="breadCrumb"> <a href="/">Home</a> <span class="divider">&gt;</span> <a class="CMSBreadCrumbsLink" href="/SCCU.Stg/Events-Calendar.aspx">Events Calendar ...

javascriptjqueryhtml

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

javascripthtmljqueryajax

Invoking functions with JavaScript objects

Can anyone help me figure out what is wrong with the following JavaScript code? <form> What is 5 + 5?: <input type ="number" id ="num_answer;"/> </form> <script> function basic_math(){ var num_val = document.getElem ...

javascripthtml

What is the best way to ensure that images appear in a square format?

Lately, I've been experimenting with the alpha version of bootstrap 4 for a project. No matter how hard I try, I can't seem to get uploaded images of different sizes to display as squares when displayed. Do you remember how Instagram used to onl ...

cssimagetwitter-bootstraptwitter-bootstrap-4

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

cssangularbootstrap-4mdbootstrap

Designing a navigation system that revolves around a central logo image

I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg Using foundation to construct a website, I have designed the nav bar in the following manner: HTML: <nav class="top-bar"> <ul> ...

csshtmlzurb-foundation

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

javascriptjquerycss

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Is there a way to calculate the height of a component that is only rendered conditionally?

I have a scenario where I need to dynamically adjust the height of a component that is conditionally rendered without explicitly setting it. The height should automatically match the size of its content. To achieve this, I am using a reference to determin ...

javascripthtmlreactjsstateref

Center-aligned video text overlay that adapts to different screen sizes for a responsive design

I am looking to showcase a full-width video with overlay text that is perfectly centered both vertically and horizontally on the video. The centering should adapt to changes in viewport width so that it remains centered at all times. Additionally, I would ...

htmlcssvideooverlay