Creating a cohesive In-Line Navbar Form with Bootstrap 4

Currently, I have designed a navigation bar using Bootstrap 4.

My aim is to incorporate the search bar in line with the navigation bar. I have applied the 'form-inline' class to the search form, however, the search button still appears below the text box.

<nav class="navbar navbar-expand-sm navbar-dark bg-secondary fixed-top">
    
    <!-- LOGO on left -->
    <a class="navbar-brand" href="#">
        <img src="../assets/DHI Logo Navbar.svg" alt="Diversified" style="width:70px;">
    </a>

    <!-- Toggler/Collapsible Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar Links -->
    <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav nav-pills">
            <li class="nav-item">
                <a href="index.php" class="nav-link">PDF Generator</a>
            </li>
            <li class="nav-item">
                <a href="contacts.php" class="nav-link">Contacts</a>
            </li>
            <li class="nav-item">
                <a href="inspectionLog.php" class="nav-link">Inspection Log</a>
            </li>
        </ul>
    </div>

    <form class="form-inline" action="inspectionLog.php">
        <input type="text" class="form-control mr-sm-2" placeholder="Search">
        <button class="btn btn-success" type="submit">Search</button>
    </form>
    

</nav>

In my navigation setup, the logo is positioned on the left side, links aligned centrally, and the search bar is intended to be on the right side inline.

Can you identify any errors that could be causing the issue with achieving an in-line search bar?

Answer №1

When CSS uses the term "in-line," it indicates that the elements behave similarly to regular text, causing them to wrap around when the screen size is reduced. This can result in your button appearing below the input.

To address this issue, you should consider grouping these elements together for a more cohesive layout. One simple solution is to apply style="display: flex;" directly to the form tag and remove the existing class.

If you prefer, you could also utilize a Bootstrap class like class="d-inline-flex".

By styling them as a flexbox, the elements will remain on a single line and only wrap as needed when the screen shrinks.

Make sure to make the following changes:
Remove the bg-secondary class from the <nav> element for proper functionality. Also, eliminate the unnecessary semicolon after the curly brackets in the CSS code.

.navbar {
    background-color: #34495E
}

Answer №2

If you're tired of using bg-secondary, why not give bg-custom a try?

<style>
    .bg-custom {
        background-color: #66ACF3;
    };
</style>


<nav class="navbar navbar-expand-sm navbar-dark bg-custom fixed-top">

    <!-- LOGO on left -->
    <a class="navbar-brand" href="#">
        <img src="../assets/DHI Logo Navbar.svg" alt="Diversified" style="width:70px;">
    </a>

    <!-- Toggler/Collapsible Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar Links -->
    <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
        <ul class="navbar-nav nav-pills">
            <li class="nav-item">
                <a href="index.php" class="nav-link">PDF Generator</a>
            </li>
            <li class="nav-item">
                <a href="contacts.php" class="nav-link">Contacts</a>
            </li>
            <li class="nav-item">
                <a href="inspectionLog.php" class="nav-link">Inspection Log</a>
            </li>
        </ul>
    </div>

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 could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

Calling ASPX method remotely and receiving undefined data

I'm still fairly new to ASP.NET and web services. I've encountered an issue where I am calling a web service from a *.aspx page, and the web service is returning the correct output. However, when I call the *.aspx method from an external HTML pag ...

Imitate the act of pasting content into a Textarea using JavaScript

When data is copied from the clipboard and pasted into an html textarea, there is some interesting parsing that occurs to maintain the formatting, especially with newlines. For instance, suppose I have the following code on a page that I copy (highlightin ...

Offset the content from the border within a container that includes a scrollbar

The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

Determine the div's width inside the viewport

I am trying to determine the width of a div within the viewport. When using .css(width) on my div, it calculates the overall width instead. Here is the code I am currently using: var $Windowwidth = $(window).width(); var $lefty = $("#gallerytop"); var $G ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...

What is the best way to decrease the width of a textfield in jQuery mobile?

Is there a way to decrease the width of a textfield in jQuery mobile? Check out this Fiddle for reference The CSS provided below does not seem to be working properly: #co label{ color: red !important; width: 100px !important; margin :30px; ...

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

Display a carousel image in the center with previous and next sliders for easy navigation

Currently, I am referencing this tutorial My goal is to make the image smaller and centered on the page I have made adjustments to the CSS to decrease the size: min-height: 350px; max-width: 900px; However, the image is still aligned to the left and th ...

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Whenever I experiment with different font names, I notice that some fonts turn blue while others remain yellow. Can anyone clarify why this is happening? font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; ...

The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...

Is the VueJs and ChartJs combination causing the chart to be width-responsive, but not height-responsive?

I've exhausted all options, but I can't seem to make the height of my chart respond effectively. The width is behaving as expected, adjusting responsively, but the height stubbornly remains fixed at 400px. Within my primary Vue application, I i ...

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

Tips on concealing a div until the value of a specific field surpasses zero

In order to ensure that users focus on the first section of the form before proceeding, I plan to hide the last section until a specific field has a value greater than zero. Check out my HTML code below: <div class="fieldcontainer"> <label>E- ...

How can I incorporate a custom font into my Git Pages website?

Having trouble adding an external font to my GitHub page. The font is in my directory, but I can't seem to get it to work on the page at https://github.com/Aadesh9985/Aadesh9985.github.io I've attempted various methods without success... I came ...

Safari does not consistently display uniform button height with the use of flex alignment

Within the div I have a button enclosed in the following structure: HTML: <div class="parent-container"> <div class="child child-1 col-xs-6"> <button class="btn btn-primary">Customize Feed</button> </div> ...

Using two different typefaces to accommodate two distinct languages on a single webpage

Let me clarify my situation. I want to create a platform where users can input text in both Hebrew and English, regardless of the language of the website itself. This means that users could type in Hebrew on an English website and vice versa. My goal is to ...