struggling to align menu items on both sides of a navbar

I am currently facing an issue with positioning elements in my HTML code. I have a File drop-down that I want to display on the left side, while the rest of the drop-downs should appear on the right side. It seems like my CSS files might be causing some interference with the layout as the display is not as expected. I have also included the bootstrap reference here, although it has not resolved the issue,

    /* menu.css */
    .dropdown {
        display: inline-block;
        position: relative;
    }
    
    .dropdown-item {
        display: inline-block;
        vertical-align: top; 
        margin-right: 10px;
    }
    
    .dropdown-item .dropbtn {
        background-color: #3498db;
        color: white;
        padding: 10px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        background-color: #fff;
        min-width: 160px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1;
        border-radius: 5px;
    }
    
    .dropdown-content a {
        color: #333;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f0f0f0;
    }

    /* Other CSS styles */

    /* Bootstrap and dropdown code */

htmlcssbootstrap-4navbar

Answer №1

If you desire to have the three dropdowns appear on a single "row", applying the flex-row class to the outer div can be beneficial:

/* menu.css */
.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-item {
    display: inline-block;
    vertical-align: top; 
    margin-right: 10px;
}

.dropdown-item .dropbtn {
    background-color: #3498db;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 5px;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f0f0f0;
}


/* styles.css */
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
}

body.debug {
    background-image: url('/static/images/background-debug.jpg');
}

body.production {
    background-image: url('/static/images/background.jpg');
}

* {
    border: none !important;
}

.custom-dropdown .dropdown-menu .dropdown-item {
    background-color: white !important;
}

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

.form-wrapper {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

.form-wrapper form .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-wrapper form label {
    font-weight: bold;
    margin-right: 10px;
}

.form-wrapper form input, .form-wrapper form select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
    color: #333;
    outline: none;
}

.form-wrapper form input:focus, .form-wrapper form select:focus {
    border-color: #333;
    outline: none;
}

.form-wrapper form button {
    display: block;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.form-wrapper form button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.form-wrapper form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
    color: #333;
    outline: none;
}

.form-wrapper form button:hover {
    background-color: #555;
}

.error {
    font-size: 14px; /* Smaller font size for error messages */
    color: red; /* Error messages in red */
    font-weight: bold; /* Bold error messages */
    word-wrap: break-word; /* Wrap long error messages */
}

#show-password {
    margin-left: 5px; /* Add some space between password input and toggle */
    width: 20px; /* Increase width of toggle */
    height: 20px; /* Increase height of toggle */
}
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-wrapper {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.qr-code img {
    display: block;
    max-width: 50%; /* Adjusted size to half */
    height: auto;
    margin: 0 auto 20px;
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 <div class="navbar-nav d-flex flex-row justify-content-between">
    <!-- File Dropdown -->
    <div class="nav-item dropdown">
        <button class="nav-link dropdown-toggle" id="fileDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            File
        </button>
        <div class="dropdown-menu" aria-labelledby="fileDropdown">
            {% if management_company is none %}
                <a class="dropdown-item" href="#" id="createManagementCompany">Create Management Company</a>
            {% elif multiple_companies %}
                <a class="dropdown-item active" href="/manage_management_companies">Management Company: {{ management_company }}</a>
            {% else %}
                <span class="dropdown-item disabled">Management Company: {{ management_company }}</span>
            {% endif %}
        </div>
    </div>

    <!-- Security Dropdown -->
    <div class="nav-item dropdown me-auto">
        <button class="nav-link dropdown-toggle" id="securityDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Security
        </button>
        <div class="dropdown-menu" aria-labelledby="securityDropdown">
            <a class="dropdown-item" href="/authentication">Authentication</a>
            <a class="dropdown-item" href="/forgot_password">Change password</a>
            <a class="dropdown-item" href="/logout">Log out</a>
        </div>
    </div>

    <!-- Help Dropdown -->
    <div class="nav-item dropdown me-auto">
        <button class="nav-link dropdown-toggle" id="helpDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Help
        </button>
        <div class="dropdown-menu" aria-labelledby="helpDropdown">
            <a class="dropdown-item" href="/about">About</a>
            <a class="dropdown-item" href="#">Help</a>
        </div>
    </div>
</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

Issue with scroll down button functionality not functioning as expected

Is there a way to create a simple scroll down button that smoothly takes you to a specific section on the page? I've tried numerous buttons, jQuery, and JavaScript methods, but for some reason, it's not working as expected. The link is set up co ...

javascriptjqueryhtmlcss

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

Looking to find the video code in the page source and figure out how to get the video to play

I have a requirement where I must embed the video code directly in a blog post. After figuring out the necessary code for the video and saving it in a html file named video.html, I encountered an issue when trying to upload the file to the blog. Only the ...

javascripthtmlajaxnode.js

Unusual behavior observed with Chrome image resizing

I've encountered an odd issue with Chrome related to image resizing when the window size changes. When I have Chrome snapped fullscreen in Windows (double-clicking to snap), and then unsnap the window, the images are not scaling correctly back to the ...

cssinternet-explorergoogle-chrome

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

Is it possible to insert an image as the background of a specific word within a paragraph?

I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...

cssimagetexthighlight

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

cssjsxsettimeoutmap-function

Using the window.setInterval() method to add jQuery/AJAX scripts to elements at regular intervals of 60 seconds

I'm having trouble with automatically updating a div. I have a script that refreshes the page content (similar to Facebook) every minute. The issue is that this div is newly added to the page and contains some ajax/jQuery elements for effects. functi ...

phpjavascriptjquerycss

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

javascripthtml

Using htaccess to redirect all html pages to php except for one

My website is configured to redirect all html pages to php using htaccess rules: RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^website.com RewriteRule (.*) http://www.website.com/$1 [R=301,L] RewriteRule ^(.+)\.html$ http://www.website.c ...

phphtml.htaccesshttp-redirect

Utilize grids to ensure consistency in the width of every <li> element across the browser

Is there a way to make the ul element span the entire width of the webpage regardless of window size? http://jsfiddle.net/32hp1w5p/ ul { grid-column: 1/13; list-style-type: none; display: table; margin: 0 auto; } li { float: left; border: ...

htmlcss

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

I recently downloaded the most recent version of Bootstrap, which is version 4. Upon extraction, I noticed that it includes two folders: one for CSS and the other for JS. The CSS folder consists of approximately 12 CSS files, while the JS folder contains ...

javascriptcssbootstrap-4bootstrap-modal

AJAX Finished Reply

I have successfully implemented a password change function on my website, but I am encountering an issue with displaying a success or fail message. Here is the structure of my HTML code: <form id="change_Pass" action="" method="post"> //stuff ...

phpjqueryhtmlajaxfieldset

Modify the internal class style to set overflow property to visible for a particular class in PrimeNG

Looking for a way to customize the styles of PrimeNG or Angular2 components? The documentation may be lacking clarity, but you can find more information at this URL: http://www.primefaces.org/primeng/#/dialog So, how do you actually go about changing the ...

cssangularprimeng

JavaScript Code for Executing Function on Checkbox Checked/Unchecked

My goal is to display an image when the checkbox is checked and show text when it is unchecked. However, I am facing an issue where the text does not appear when I uncheck the checkbox. <input type="checkbox" id="checkword" onchang ...

javascripthtml

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

When viewed on a small screen, my website transforms its menu into a hamburger button. Clicking the button toggles a sidebar displaying a stacked version of the menu on top of the normal website (position: fixed; z-index: 5;). This sidebar also triggers a ...

javascriptjqueryhtmlcssiphone

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

Occasionally, a tiny dot appears almost imperceptibly, like the one below the "prices" menu item: https://i.stack.imgur.com/kyaP3.png This is the hover effect code I created: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: ...

htmlcsscss-transitions

Postback does not reload all controls in the NameValueCollection

Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...

c#cssasp.netcustom-controls

Maximizing the functionality of PHP switch to create clickable list items

I have successfully created a simple switch for my website, but I am encountering an issue with clickable list items. The concept is that when I click on any of the list items, the switch should display the appropriate greeting (whether it's Night or ...

phphtmlswitch-statement

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

htmlcss