Creating a central navbar brand with a collapsing feature using Bootstrap 4

Struggling with Bootstrap 4 Alpha 6

I'm having trouble getting both the right links and left link to collapse when using Bootstrap. Currently, only the right-hand side link collapses while the left link remains unchanged.

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</div>

<a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

csstwitter-bootstraptwitter-bootstrap-4

Answer №1

To ensure proper functionality, it is recommended to enclose both the menus ul within a single navbar-collapse div. The Toggle Menu button should only target one collapse div at a time, not multiple ones as before when there were two navbar-collapse.

Below is the code you should implement:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
  <a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
  <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>
</nav>

Answer №2

As of alpha 6, the collapse feature only supports a single target..

Upgrade to Bootstrap 4.1

You have the option to absolutely position the brand on larger screens and use a single collapse for both navbars.

@media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

For more information, check out:
Centering an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?

Answer №3

<nav id="mainNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
  <a class="navbar-brand mx-auto" href="#">Main NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Main Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Main Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Main Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Main Link</a>
        </li>
    </ul>
  <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About Section</a>
        </li>
    </ul>
</div>

Answer №4

ZimSystem's code will cause the menu items to overlap because of its 100% width and potential conflicts with click events. It would be more appropriate to use the left property instead of setting the width.

.navbar-brand
  {
    display: block;
    left: 50%;
    position: absolute;
    text-align: center;
  }

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 apply CSS to my HTML code?

I have the files stored within my Django project. My directory structure for templates looks like this: |base.html | |rules | |style_base.css In my base.html file, I link to the stylesheet like this: <link type="text/css" href="/rules/style_b ...

htmlcssdjango

How come the buttons in the navbar are not aligning to the right with justify-content-end?

Having trouble aligning the two buttons in my bootstrap navbar to the right. Despite using justify-content-end, it doesn't seem to work. I thought applying d-flex to the container and then justify-content-end to the items would solve the issue, but e ...

csstwitter-bootstrapbootstrap-5

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

"Move a div towards the mouse's location by animating it with JavaScript when

I've been working on making the ball element move and shrink towards the goals upon mouse click. I successfully created a function that captures the mouse click coordinates in the goals, but I'm facing challenges with the ball animation. I consi ...

javascripthtmlcss

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss

The initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

I am currently working on triggering an Offcanvas with JS and making the placement configurable. The issue arises when attempting to dynamically set the offcanvas-end class to the offcanvas element, as it does not transition smoothly the first time it is t ...

javascriptcsstwitter-bootstrapcss-animationsbootstrap-5

Customize images using React JS to add an overlay on top of an HTML img

I'm looking to achieve a similar effect to Facebook where hovering over an image tag triggers a little overlay asking if you want to edit the photo. I have the hover functionality working, but I'm unsure how to implement the overlay. The image is ...

htmlcssreactjs

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

htmlcsspseudo-element

Issues with tab functionality in Bootstrap 4.0.0

Using the bootstrap tabs control, it appears correctly in bootstrap 3.3.7 https://jsfiddle.net/steve_richter/evn2ncbo/7/ <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"& ...

twitter-bootstrapbootstrap-4

What's the best way to constrain a draggable element within the boundaries of its parent using right and bottom values?

I am currently working on creating a draggable map. I have successfully limited the draggable child for the left and top sides, but I am struggling to do the same for the right and bottom sides. How can I restrict the movement of a draggable child based o ...

javascriptjqueryhtmlcssjquery-ui

Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu : No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [ ...

javascripthtmlcssimagelayout

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

Is it possible to implement scrollspy functionality without utilizing the nav or list-group elements? According to Bootstrap's documentation on scrollspy, it is typically restricted to use within nav or list group components. DOCUMENTATION How Scroll ...

htmlcssbootstrap-4scrollspy

How can I prevent Hover effects on active LI elements in a menu?

When a Navigation menu item (LI) is marked as active in CSS, how can I prevent it from being hover-able? Check out the CSS code below: .page-header .menu li { float:left; display: inline; margin-right: 2px; line-height: 34px; } .page-he ...

htmlcss

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Issue with JavaScript Variable Not Reflecting Changes in Progress Bar

I'm in the midst of developing a game and have incorporated a progress bar to facilitate the incrementation of certain values on my HTML page. However, once the progress bar hits 100%, it updates the cost and level only once. After that initial update ...

javascripthtmlcss

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

csscontainers

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

htmlcss

Can a Bootstrap 4 column be designed to have the same height as its width?

Can a Bootstrap 4 column have equal height and width, creating a quadratic design with three columns? Is it feasible to make the first two columns as quadratic dimensions, with the third column matching their height? <div class="row"> <div ...

htmlcssbootstrap-4bootstrap-grid

Preventing the pull-down-to-refresh feature on Chrome mobile can be achieved by adjusting the

Looking for a way to prevent the pull-down-to-refresh feature on mobile Chrome, especially iOS Chrome? My web application utilizes vertical panning events with device-width and device-height viewport settings, but each time I pan down, mobile Chrome refres ...

javascriptioscssmobile

Why is the current Menu Item highlight feature not functioning properly?

Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...

javascriptjqueryhtmlcss