Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view?

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
            <div>
                Pagewide
            </div>
            <div class="container" style="padding: 0px;">
                <a class="navbar-brand" href="<?php echo $this->url('home'); ?>" target="_self">
                    <img src="<?= $this->basePath('img/logo.png') ?>" style="width: 100%;"/>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="<?= $this->basePath('inloggen') ?>">Inloggen<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>
                </div>   
            </div>
        </nav>

Answer №1

The sticky header remains at the top of the page.

To position your banner above it, specify the desired height for the full-width bar and adjust the top: spacing above the sticky header. Use a media query to hide it on smaller screens.

@media (min-width: 992px) {
    .header {
        top: 54px;
    } 

    .fullwidth {
        height: 54px;
    }
}

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

Ways to adjust the width of b-table th

How can I adjust the width of the th to expand the rows of the table like in the screenshot? Is there a way to add a class to th? View what I want here logTableField: [ { key: "LogDate", label: "Tarih",thClass: 'bg-white tex ...

Tips for stopping Infinite Scroll from loading pages when the tab is inactive

I'm currently developing a website using Bootstrap 4 and jQuery, which consists of 3 tabs, each containing masonry elements loaded on scroll with the Infinite Scroll plugin. I'm trying to figure out a way for the Infinite Scroll to only load cont ...

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Can someone provide me with the steps to get DIV:Hover functioning in Internet Explorer 8? ...

The placement of buttons in a responsive web design

Need help with adjusting button positions in mobile mode relative to text. Tried using different position settings like absolute and relative, but buttons are not staying aligned with the text on mobile devices. Can anyone assist? .button { display: b ...

Show/Hide sections of content that transition and rearrange the layout of the page

I have a layout with 9 squares on a page. When clicking on a square, I want a full-width div to appear underneath it, pushing the other squares down. I've tried following a tutorial to understand the JavaScript behind this functionality, but I'm ...

The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints. This is what I have in the head <meta name="viewpo ...

The placement of toolbar buttons in HTML

My current dilemma involves the placement of a logo on the navigation bar of my website. When the logo is present, the text is not centered vertically, but when I remove the logo it centers correctly. * { margin: 0px; padding: 0px; } .logohead { d ...

Looking for a way to exclude both parents and children from a list of relatives? Want to ensure that the

I've been struggling to align these list elements with their counterparts, but they seem to automatically create a margin for their child elements. It is essential for these list items to maintain the position:relative attribute so that the #dropdown ...

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

Encountering spacing problems on IE9 and FF11 while using OS X

After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X. Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test f ...

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

Attempting to arrange six images in a row using dividers

Having trouble aligning six images (2 per row with text in between) to the center of your webpage? Don't worry, we've got you covered! Check out the screenshot attached for reference and let us know how we can assist. Click here for a snapshot of ...

Is the utilization of javascript functions intertwined with the specific version of bootstrap being used?

I wrote a function that breaks down each letter in a paragraph to create a typing effect. However, after taking a break for a few days, I noticed that the effect was now the opposite – the letters were disappearing. To solve this, I decided to animate ...

The functionality of Jquery toggle() does not support multiple classes simultaneously

I'm attempting to display or hide specific elements depending on the values of checkboxes. While the toggle switch for "Show Guides" is functioning properly, the toggle switch for "Show Padding" is not. I experimented with different approaches: $( ...

Center align the list items on mobile using flex in bootstrap 4

At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...

Changing the CSS background in React when updates occur

Currently working on toggling the CSS background image within this React application. The images have been successfully imported and a variable called "image" is set to the imported image as the iteration increases/decreases with each click. The issue I&a ...

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

What could be causing the PAGE CSS to malfunction?

I am looking to export HTML text as a word document with A4 size and portrait orientation. My JavaScript currently allows me to export the text, but it appears like a webpage format rather than in A4 or portrait mode. I have tried adding @page CSS styling ...

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...