"Stacked Bootstrap navbar with two divs placed one on top of the other

I'm having trouble with positioning div1 above div2 in the code snippet below. Despite setting both divs to have full width and float right, they appear next to each other instead of stacked vertically. I've tried using clear:both as well, but it didn't work as expected.

Any suggestions on how to achieve this layout?

Thank you

EDIT: I am utilizing Bootstrap 4.0.0.

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light top">
                <img src="images.png" alt="image" class="imageClass">
                <div class="div1 ">
                    <a href="#" id="id1">somthinghere</a>
                    <a href="#" class="active">link</a>
                    <a href="#" class="">link2</a>
                </div>
                <div class="collapse navbar-collapse div2" id="navbarsExampleDefault">
                    <ul class="navbar-nav ml-lg">
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link11</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link111</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1111</a>
                        </li>
                    </ul>                       
                </div>
            </nav>
        </div>
    </header>
</body>

CSS:

header{
    position:absolute;
    z-index: 10;
    width: 100%;
}

.div2{
    clear:both;
    width: 100%;
    float:right;        
}

.div1{
    width: 100%; 
    float:right;
}

https://i.sstatic.net/eRiIA.png

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 is the best way to keep an image fixed at the top while scrolling, but have it disappear when the page reaches the footer?

I am in need of creating a unique Bootstrap 4 layout that involves an image staying fixed to the top after scrolling down until it reaches the bottom of the header. When the page is further scrolled down and the footer comes into view, the image should sta ...

Limit the use of Javascript specifically within a section of HTML that includes a rich-text editor

Currently, I am working on a web application that has a historic background. This application uses the summernote editor, a rich-text editor that allows users to save formatted notes to the server. Along with this, there are numerous instances of inline Ja ...

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

What is causing the discrepancy in height between my parent DIV and its children?

I've been grappling with this issue for quite some time now and unfortunately, I haven't been able to come up with a solution. Within my design, I have a frame that consists of a top box, a left box, a right box, and a middle box that contains th ...

Iterate through each image within a specific div element and showcase the images with a blur effect applied

I have a div with multiple images like this: <div class="am-container" id="am-container"> <a href="#"><img src="images/1.jpg"></img></a> <a href="#"><img src="images/2.jpg"></img>< ...

Can the input type of an input element inside a table cell be altered by referencing the table cell's id using javascript?

Need help with changing the type of an input element from password to text using JavaScript? The input element is located inside a <td> with the id "pass". Also looking to add a checkbox that toggles displaying or hiding the password value. I'm ...

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

As I hover over this bootstrap button with the class "btn-info", its background color fades away

Can anyone explain why this button loses its background color when I hover over it? Here is the code for the button: <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <button type="butt ...

The alignment of my text appears to be off

I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...

The functionality of .attachClickHandler() is not maintained when the page is refreshed or redirected

I've encountered an issue while trying to integrate a custom Google login button in my index.html file. Initially, everything functioned flawlessly upon page load, with console outputs 1, 2, and 3 appearing sequentially, followed by output 4 upon sign ...

A guide on displaying an integer variable as a placeholder

<form> <?php echo "<script> quantity = $item_quant; </script>"; ?> <input type="number" name="quant" class="quant" placeholder="{{ quantity }}"> </form ...

Injecting JavaScript object values into dynamically generated modal

I have a JavaScript object that contains various training courses. Each category includes multiple training courses, and each course is associated with a specific category. Currently, I am able to display the title and description of each category in a mo ...

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

The Vue.js @click event does not function properly when used in a selection on mobile

I designed a dropdown menu with different options, and when one is selected it updates the "Value" in vue to a specific amount. Then, I display the selected amount in an input field. For example: <select class="form-control" style="max-width: 150px;" ...

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

What is the best way to display an error message for an invalid input using JavaScript?

I am struggling to implement error messages for my form inputs using JavaScript. My attempts so far have not been successful and I need guidance on the correct approach. I want to show an error message and prevent the form from being submitted if any erro ...

I can't see any tools anywhere on my page in Literally Canvas

My Implementation: <!DOCTYPE html> <html lang="en"> <head> <title>Creative Drawing Tool</title> <link href="css/creative-drawing-tool.css" rel="stylesheet"> <script src="jquery-2.1.4.min.js"></scrip ...

What are the steps to effectively incorporate Bootstrap into a React project?

I have recently put together a basic webpage with a header and footer. Utilizing Bootstrap for the header components, I have encountered an issue where Bootstrap does not seem to be functioning as expected. Here's a snippet from App.js: import R ...

Make changes to external CSS using HTML and JavaScript

Is it possible to dynamically change the value of a background in an external CSS file using JavaScript? Currently, all my pages are connected to a CSS file that controls the background for each page. I am attempting to modify the background by clicking a ...

Building a Responsive Grid Layout with HTML and CSS: Layering one div on top of another

I'm struggling to find a solution to my problem. I attempted to set my div as absolute but it messed up the entire flexible grid layout. All I need is to place the div above the background div. Thank you in advance! CSS #mannequin { box-sizing: ...