Positioning a floating div to the right side within a wrapper element

Is there a way to align my navicon menu button to the right edge of the wrapper div on screens smaller than 768px without causing it to float outside of the wrapper? Currently, when I try to move the navicon button to the right side using floating, it appears correctly but ends up outside the wrapper, leading to a buggy user experience. Any suggestions on how to fix this?

JSFiddle: Floating navicon to right side of wrapper

HTML:

<div class="wrapper">
        <div class="nav-wrapper">
        <a href="#" id="logo">THIS IS A LOGO</a>
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    </div>

CSS:

 * {
        margin: 0;
        padding: 0;
    }

body {
    background-color: #cecece;
}

.wrapper {
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            background-color: #fff;
        }



#logo {
    width: 200px;

}

#nav {
    width: 100%;

}



    li {

    }

    li:last-child {
        border-right:none;
    }


    li a {
        display: block;
        width:100%;
        background:#000;
        color: #fff;
        font-size:1.35em;
        text-decoration: none;
        margin-top: 5px;
    }

    @media screen and (max-width: 768px) {
        .wrapper {
            width: 100%;

        }


        #menu {
            width:1.4em;
            display: block;
            background:#ddd;
            font-size:1.35em;
            text-align: center;

        }

        #logo {
            float: none;
        }

        #nav.js {
            display: none;
        }
        ul {
            width:100%;
            list-style:none;
        }
        li {
            width:100%;
            border-right:none;
        }
    }

    @media screen and (min-width: 768px) {

        #nav-wrapper {
            background-color: #fff;
            overflow-x: visible;
            width: 100%; 
            background-repeat: repeat;
        }

        #logo {
            float: left;
        }

        ul {
        width:100%;
        overflow: visible;
        background-color: #fff;
        height: 40px;

    }

    li {
        display: inline-block;
        padding: 0 20px;

    }
        #menu {
            display: none;
        }
    }

jQuery:

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
$("#menu").click(function(){
    $("#nav").slideToggle();
});
$(window).resize(function(){
    if(window.innerWidth > 768) {
        $("#nav").removeAttr("style");
    }
});

Answer №1

Here is a helpful CSS tip:

.container {display:flex;}
#sidebar {flex:1;}

The display:flex property will create a flexible layout for the .container div, and the flex:1 property will allow the #sidebar to expand as needed.

http://example.com/css-tip

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

Utilizing Bootstrap 4 grid layout on high-resolution retina displays

Here is a div I have: <div class="col-lg-4 col-xl-4 col-md-6 col-sm-12 px-0 p-4"> On a 27-inch screen, it uses col-xl-2 and works perfectly. However, on a 13-inch Macbook Pro with a retina screen, it still uses col-xl-2 and looks strange. How can I ...

Sending a JavaScript variable to Python Flask

I've searched through various forums but still can't grasp how to pass a JavaScript variable to Flask using post/get forms. I know that the form creates a post/get request that can be received by the Python Flask script, but I need a simple examp ...

How to use jQuery to dynamically identify the current div on a page when scrolling, even with an unpredictable number of divs

I have a container with multiple A4 pages (number varies) and I am trying to determine the current page being viewed. Below is my code: <div class="mycont"> <div id="page1" style="width: 21cm; height:29.7cm; border: ...

Unattaching Events in AngularJS

I'm still navigating my way through the realms of Angular and MVC programming, uncertain if I'm on the right track. There's a jQuery snippet that I wish to implement in some of my partials, but not all. With event listeners that persist eve ...

Having issues with Thymeleaf template not functioning properly when using inline JavaScript

I've encountered an issue when attempting to extract my function into a script within HTML. When written as shown below, it works perfectly: <input type="text" id="myInput" onkeypress="return confirm('Are you sure you want to delete ...

Refreshing the Span Element using Ajax and php

Hello there, Stack Overflow community! I have a basic PHP script (countsomething.php) that retrieves a number and displays it using echo. How can I use AJAX to automatically update a simple span element on my HTML page? I've attempted to trigger th ...

Local Bootstrap notifications functioning correctly, but failing to display on the server

I successfully set up notifications in a localhost application, and they were functioning perfectly. However, after uploading to the server, the notifications stopped displaying without any changes being made. The application consists of two main files: ...

Creative Solution for Nested Forms

I am currently facing a challenge with nested forms in my PHP project. I need to include a form for AJAX image upload within another form so that I can pass the file path to the main form. The example code snippet is provided below; <form> <f ...

Floating image positioned between two div elements

Attempting to replicate a specific design using HTML/CSS has been a challenge. I've been struggling to position an image on top of the two divs. I would greatly appreciate any assistance with the design. Here is what I have tried so far: The follo ...

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

I am attempting to replicate the offset feature in Bootstrap's desktop grid system, where a class like .col-md-offset-3 creates an offset using margin-left. However, in my implementation found at this link, the CSS selector does not work as intended: ...

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 ...

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

V-model prevents checkbox from being checked upon clicking

codesandbox: https://codesandbox.io/s/github/Tapialj/AimJavaUnit6?file=/src/frontend/src/components/AddMovieForm.vue I am currently working on implementing a feature where I need to collect an array of selected actors using checkboxes. I have set up a v-m ...

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

Tips for showcasing additional choices within a SELECT element while incorporating floating labels and adjusting the size

I'm struggling to make a floating label work smoothly with an HTML select that has a size="5" attribute using Bootstrap 5.3.x. It seems like it's not possible without some hacks or missing information from the Bootstrap documentation. According ...

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the ...

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

Golang template's nested ranges

Being fairly new to this, I could use a little assistance. I have these two structs: type School struct { ID string Name string Students []Student } type Student struct { ID string Name string } M ...

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...