The brand in the Bootstrap 4 navbar remains consistent even when the screen is maximized

Having an issue with my navigation bar design.

I'm currently working with Bootstrap 4 Beta and facing a problem when trying to adjust the navbar-expand-...

The current appearance of the navbar-brand looks like this:

COMPANY
NAME

However, I want it to look like this:

COMPANY NAME

EDIT:

Here is the code for the navbar: 

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
        <!-- Navigation Bar Brand -->
        <span class="h2" class="navbar-brand mb-0">COMPANY NAME</span>
htmlcssbootstrap-4

Answer №1

This solution has been tested on various screen sizes -lg, -md, and -sm.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</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

Limiting the input in a text box to only allow whole numbers and no decimal values

What is the best way to limit a textbox to only accept whole numbers and exclude decimal values and alphabets? ...

javascriptjqueryhtml

Using the bootstrap container-fluid to create additional space on the right side

I've been trying to remove the right side padding in my container-fluid without success. There seems to be extra space where the red lines are marked. I have attempted various methods to fix this issue but I can't seem to identify where this ex ...

htmlcssbootstrap-5

Tips for retrieving JSON data using ajax with jPut

Recently, I stumbled upon a handy jQuery plugin called Jput that allows for easy appending of JSON data to HTML content. You can check it out here. However, I am curious about the process of sending and retrieving JSON data via AJAX. Any insights or guida ...

javascriptjqueryhtmlajax

I am unable to click on items due to an obscure element blocking my

My selling webpage, created with Asp.net and CSS, is experiencing an issue where text boxes and hyperlinks are being overlaid, making it impossible to click on them when accessed via a mobile device. I've tried troubleshooting on my own without succes ...

cssasp.net

The heights of the dropdown menu and button vary in size within the Dash Plotly Python framework

I'm currently working on creating a dashboard using dash in Python and I need help aligning 2 dropdowns and a button horizontally. This is the html.Div code snippet that I have been working on: html.Div([ html.Div( dcc.Dropdown( ...

pythonhtmlcssalignmentplotly-dash

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

javascripthtml

When I log out and hit the back button, the PHP page continues to display without any changes

After logging out of my PHP session and being redirected to the login page, I am facing an issue where pressing the back button shows me the previous page without requiring a login. How can I fix this problem? Thank you in advance. index.php <form sty ...

javascriptphphtmlajax

The precise placement of DIVs with a background image

Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions? Here is my code: <div class="div-bg" style="background-image:url ...

htmlcss

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

htmlcssreactjswebmaterial-ui

I am looking to add some flair to my ID "checkimg" using JavaScript

JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...

javascriptjqueryhtmlcss

Creating interactive JavaScript elements that can be moved around within a container

I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...

javascripthtmljquerydrag-and-dropdraggable

Is it more effective to implement react useState and conditional rendering for managing different screen sizes, or is it better to use

In my current project, I am using standard CSS3 and creating separate CSS files for each component. I am debating whether to incorporate an event listener with multiple return functions within my React component instead of having multiple media queries in ...

cssreactjsconditional-statementsrendering

Javascript is malfunctioning when trying to import Bootstrap library

I've been attempting to integrate this search bar into my webpage from the following source: https://github.com/jeffersonRibeiro/jquery-simpleSelect However, it seems to encounter issues when I import bootstrap. I've double-checked the import pr ...

jqueryhtmlbootstrap-4

Differences between Bootstrap 3.3.7 and Bootstrap 4

After successfully building my application on Bootstrap 4 and incorporating Bootstrap-Table and Bootstrap-DateTime picker plugins, I ran into display issues when trying out Bootstrap-Select. It was then that things went haywire. Upon closer investigation, ...

cssbootstrap-4bootstrap-selectpicker

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

Adjusting the size of a DIV with a CSS background as the browser window is

This issue seems simple, but I've been struggling to find a solution. <div class="bg"> <div class="container2"> <p> Test content goes here </p> </div> </div> I am facing an issue ...

htmlcss

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

What is causing the fluctuation in the width?

I am struggling to understand this portion of CSS code. When I resize the page, one button sometimes overlaps with the edit box. While debugging in Firebug, I noticed that the width is displayed as 0 for a container. Adding some width brings the button bac ...

htmlcss

The Ng-bootstrap dropdown menu fails to activate when clicked within a table row with a click event listener

By simply clicking on a table row, users can easily view the details. When I incorporate a 'ng-bootstrap' dropdown menu in the last column of the data table, it seems that clicking on the dropdown button does not open the menu as expected. Inste ...

angularbootstrap-4ng-bootstrap

Can multiple bootstrap classes be merged together?

Using various bootstrap classes multiple times within an HTML <form>. Example: <form id="frmData" name="frmData" method="POST"> <div class="row justify-content-sm-center mb-2 align-items-center"> ...

htmlbootstrap-5