Attempting to mimic a navigation bar design with the help of Bootstrap 4

I'm feeling a bit stumped right now, but I know the solution is probably simpler than I think. I'll kick myself when I figure it out.

Basically, I'm trying to create a NavBar similar to the one on the Sand Cloud Towels website using Bootstrap 4. my goal is to have a full-width fluid header container with a centered navbar inside that is not full width. Additionally, I want the header to be fixed with a solid 1px border at the bottom for scrolling.

Here's what I have so far: https://www.bootply.com/S4g9HGsy30

If I add the fluid class to the header tag, everything becomes full width, including the navbar inside. If I leave it as is, the bottom border only extends the length of the navbar and not the full width.

Any suggestions? Thanks.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Instead of using class='container' in the header as the parent, you can remove the container class from the header and insert another 

<div class='container'</div>
inside the <nav> element.

         <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class='container'>
                   <a class="navbar-brand" href="#">Navbar</a>
                   <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" id="navbarNavAltMarkup">
                     <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                        <a class="nav-item nav-link disabled" href="#">Disabled</a>
                     </div>
                   </div>
                </div>
            </nav>
        </header>

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

Custom CSS Editor for Third Party Visual Studio Themes

Are there any reliable and user-friendly style sheet editors that can be integrated with Visual Studio? I recently came across a resource editor that surpassed the default version for opening .resx files. This got me thinking, there may be some advanced ...

c#asp.netcssvisual-studio-2010stylesheet

Guide to executing multiple AJAX requests within a single Django view

As I develop my personal spending diary, I encountered a dilemma. To enhance the user experience, I aim to streamline the process of adding new items without refreshing the page. Although I created a single ajax form, I now realize the necessity for two ...

javascriptpythonhtmldjangoajax

Table content not showing up in Bootstrap tooltip

While revisiting a project from last year, I noticed that Bootstrap no longer displays table in tooltips. Over the past year, I have updated Bootstrap and we have a shared asset for another project with the same version. Currently using Bootstrap 4.3.1, ...

bootstrap-4

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

javascriptjqueryhtmlcss

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

javascripthtmlangularjs

Having trouble getting past the initial iteration in Angular's modal system?

Having trouble generating a modal for every iteration in ngFor. The data passed to the modal seems to be stuck in the first iteration and doesn't change with each iteration. Any ideas on how to solve this? <div class="container"> & ...

javascriptangulartypescriptbootstrap-4html5-canvas

Bootstrap: Access Tabs Through URL Parameters

Lately I've been struggling with Bootstrap tabs. Selecting a tab directly via URL seems to be an issue. For example, if I visit http://example.com/sample.php#medicalrecords, the #medicalrecords tab should automatically be selected. Below is my sampl ...

javascriptjquerytwitter-bootstrap

The CSS effect fails to take effect following an AJAX response

After a successful ajax response, I am attempting to apply a jQuery .css effect. However, it seems that this process is not working as expected because I am trying to retrieve the height of a newly created element and then applying it to another newly crea ...

jquerycss

Instructions on changing row color with button click and reverting back to original color upon subsequent click

When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color. Sample Code Snippet: <table> & ...

htmlcssangularjs

Having trouble getting the image to show up in Django from the static directory

In the code snippet below, the image is referenced: Found inside the HTML and CSS files: <button type="submit" class="task-item-button"> <img src="{% static 'x.svg' %}" alt="Close icon"> </b ...

htmldjangosvgdjango-templates

Two Ajax Requests Simultaneously

I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...

javascriptphpjqueryhtmlajax

Creating a Sticky Table Header with Dynamic Height in React using Material-UI

I am currently utilizing the Material-UI library in React to present a table on my webpage. My goal is to have a sticky header on the table without specifying a fixed height, allowing it to scroll along with the page. However, the code snippet provided doe ...

javascriptcssreactjsmaterial-ui

Best Practices for Implementing an Autocomplete Search Box in HTML

I'm currently working on implementing the code below and I could really use some guidance. Despite reading and watching Google Developers' YouTube videos, I am still struggling as I am new to this. My main goal is to integrate an autocomplete sea ...

htmlgoogle-maps

Creating a gradient border around a div using CSS3

Can a border like this be achieved using only CSS, or will I need to use an image? ...

htmlcssborder

How to fix issue with uibModal not showing on full screen in AngularJS using HTML5

Having some trouble creating a uibModal in angularjs 1.6; my modal doesn't seem to be appearing on the entire screen as expected. What could potentially be causing this issue? ...

angularjshtmlbootstrap-4angular-ui-bootstrap

Ways to conceal or deactivate button controls on videojs?

I am building an application using video.js and Vue. I am looking for a way to hide or disable certain controls like the play button, playback rate, and make the progress bar read-only. In the video.js documentation, I found that using controls: false hi ...

javascripthtmlvue.jsvideo.js

What is the best way to arrange flex-column children from left to right?

I'm looking to arrange flex items from left to right within a flex-column layout. The Current Setup How I Want It to Look This is my code: display:flex; flex-direction: column; align-items:flex-end; justify-content: flex-start; align-content: flex- ...

htmlcssflexbox

`Select Dropdown Choice will Populate Corresponding Textfields`

While I know this question has been asked multiple times on Stack Overflow, I am looking for a more tailored solution based on my specific requirements. That is why I'm posting this question. I have an HTML form with PHP that retrieves data from an M ...

javascriptphphtmlsql-serverauto-populate

Centering an element within a DIV using responsive absolute positioning

How can I ensure that the blue box always stays centered within the red box when resizing the window? Currently, it's not in the correct position. View the example online: http://jsfiddle.net/NVjPF/ Thanks! <div id="box1"> <div id="box2" ...

css