The Bootstrap 4 navigation bar item unexpectedly jumps below and then wraps around

I am working on creating a navbar using the latest version of Bootstrap 4 (alpha6).

<nav role="navigation" class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>

Can anyone suggest the best method to ensure that the nav brand and items align in one line using Bootstrap 4? Check out the example on Codeply

cssbootstrap-4

Answer №1

Make sure to review the navbar documentation.

Instead of using nav, opt for navbar-nav and apply a navbar-toggleable-* class to maintain a horizontal navigation until reaching a specific breakpoint, at which point it will collapse vertically.

<nav role="navigation" class="navbar navbar-light bg-faded navbar-toggleable-md">
    <a class="navbar-brand" href="/">
        <img src="/public/img/logo.png" height="36" alt="myLogo">
         Food on Track
    </a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <svg>
            </svg>
        </li>
    </ul>
</nav>

See the demo here:

Update 2018

Starting with Bootstrap 4.0.0, navbar-toggleable-* has been replaced with navbar-expand-*

Answer №2

Give this a shot

<nav role="navigation" class="navbar navbar-light bg-faded">
<div class="row">
<div class="col-md-10">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
</div>
<div class="col-md-2">
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </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

Challenges with right-to-left alignment in Bootstrap 4 input groups

Recently, I was tasked with making a bootstrap v4 page RTL for a project. After adding the dir="rtl" attribute to the code, I noticed that the styling of the input-group element got all messed up: <link href="https://v4-alpha.getbootstrap.com/dist/c ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

How to customize the button color in a Next.js application

Help Needed: Issue with Changing Default Button Color in Next.JS Web Application. The button text color appears as grey on Desktop Google Chrome, but shows up as blue on Mobile Chrome browser. I want to unify the color to be grey on both platforms. Custo ...

javascriptcssbuttonnext.js

Swap Text/Characters When Hovered Over

I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for thi ...

javascriptjqueryhtmlcss

The input field should be set to 'textarea' to allow multiple lines of text, and a line break should be

Here is a text area that functions like a post. It is designed to break at the end of the post instead of overflowing on the same line. .post input { outline: none; font-size: 15px; font-family: sans-serif; font-weight: 300; width: 200px; pa ...

htmlcss

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Attempting to implement a secondary level of dropdown menu using CSS

As I begin, I want to mention that I have thoroughly reviewed all the sub sub menu questions, but unfortunately, I couldn't find anything that aligns with the code I currently have in place. Any assistance will be greatly appreciated. My current task ...

cssmenuparent-childsubmenu

Change the duration of a CSS animation rotation using jQuery and an input range control

I'm trying to rotate an element using the -webkit-animation properties, but I want to be able to control the duration using jQuery and an input range slider. Unfortunately, I'm having trouble getting it to work and I can't figure out what&a ...

jquerycssanimationrotationduration

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

Aligning object in middle of a responsive image using Bootstrap

I'm having trouble centering a button on an image using responsive design techniques. I am currently utilizing Bootstrap 3 and have attempted to use CSS margin properties to center the button, but this method is not ideal especially on smaller screens ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Setting up Stylelint in a Next.js project: A step-by-step guide

I'm looking to incorporate Stylelint into my Next.js app. Can I modify the next.config.js file to include the stylelint-webpack-plugin, in order to receive style errors during compilation? // next.config.js module.exports = { reactStrictMode: true, ...

javascriptcsswebpacknext.jsstylelint

What is the method for aligning inline-block text to the right after a line break?

I am currently encountering a challenge in developing a directory tree using <ul> element, particularly when the text of an item exceeds the width of the container. As I am utilizing the antd React library for this project, my options are somewhat l ...

htmlcsslayoutantd

What are some methods for identifying a single attribute element that is duplicated elsewhere on a webpage?

<html> <tr id="userman-orgchart-tree-node-9" class="fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"> <td> <span class="fancytree-node" style="padding-left: 16px;"> <span class="fancytr ...

htmlcssxpathselenium-webdriverselenium-ide

A Guide to Quickly Registering Multiple Sidebars in functions.php

I'm looking to efficiently register multiple sidebars at once and differentiate them by unique IDs, similar to how we can easily register multiple menus simultaneously such as Main-Menu and Footer-menu. <?php register_nav_menus(array('primary ...

phphtmljquerycsswordpress

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

htmlcss

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help. Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below: O ...

ioscssiphoneios7ionic-framework

Is it possible to link a css file from an ascx control during registration?

Is there a specific way to register a css code block within an ascx control? Do I simply place <head id="head" runat="server"> <style type="text/css"> .customClass { background-color: Lime; } < ...

asp.netcssascx

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations