logo
down
shadow

resize dropdown menu to match link width


resize dropdown menu to match link width

Content Index :

this will help I would like to resize my dropdown menu to match the link width. Here is a picture of what I currently have: , I have make some modification related to the css.
/* Navbar container */
*{
    box-sizing: border-box;
  }
   .navbar {
      background-color: #272424;
      font-family: Arial;
     height:50px
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font: Arial;
      font-size: 20px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      width: 25%;
    }

    /* The dropdown container */
    .dropdown {
      float: left;
      width: 25%;
       position: relative;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
      width: 100%;
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #81A3A7;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
          width: 100%;
    }

    /* Links inside the dropdown */
    .navbar .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      width:auto;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
<div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Move menu items to a dropdown menu when they exceed the width of the menu [*for Responsiveness]


Tag : jquery , By : woxorz
Date : March 29 2020, 07:55 AM
Hope that helps Make use of Media Queries in CSS for this problem.
For instance:
@media all and (max-width: 640px) and (min-width: 240px) {
  #fulllength_menu {
   //Hide menu that's displayed for screens bigger than 640px
    display:none;
  }
  #minimobile_menu{
    //Hide menu that's displayed for screens smaller than 640px but bigger than 240px
    display:block;
  }
}

Tag : jquery , By : jamerson
Date : March 29 2020, 07:55 AM
I hope this helps . I am trying to create a responsive drop-down menu. The menu works perfectly except for when you try to select one of the menu links. Clicking a link closes the menu but doesn't open the link you just stay on the current page. , Inspecting your CSS I noticed this:
@media only screen and (max-width: 760px) {
    nav ul, nav:active ul {
        display: none;
    }
}
@media only screen and (max-width: 760px) {
    nav ul {
        display: none;
    }
}
jQuery(document).ready(function($) {
    $('.menu-button').click(function(){
        $('nav').toggleClass('active');
    });
});

Tag : javascript , By : Adam
Date : March 29 2020, 07:55 AM
wish helps you JSBin
This is the solution I used. Instead of making {{link-to}} be a li, make a component that is a li. This component makes use of the work Ember does in setting the active class for any link-to to the current route:
App.NavItemComponent = Ember.Component.extend({
    tagName: 'li',
    classNameBindings: ['active'],

    active: function(){
        return this.get('childViews').isAny('active');
    }.property('childViews.@each.active')
});

need to resize bootstrap dropdown-menu width


Tag : jquery , By : lwl_seu
Date : March 29 2020, 07:55 AM
it helps some times I need to resize my dropdown-menu`s width , added
/* CHANGES */
.dropdown-menu,.dropdown-toggle{
    min-width:100px;
}
.dropdown-menu>li>a{
  padding: 3px 5px 3px 0;
}

Make 'dropdown-content' same width as paper-dropdown-menu?


Tag : javascript , By : codelurker
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • Add dynamic margins using UI Kit
  • Add margin-top to textbox
  • What is the correct semantic HTML markup for a title (book, movie, etc.), according to the spec? Is it an <em> tag
  • How to make an animation in Geoserver or in Leaflet
  • Buttons overlapping when shrinking window
  • Stretch an element to the end of the automatically calculated grid, not just the explicit grid
  • What relation is there between Angular's <ng-content> and ShadowDOM
  • CSS background for div element is not working
  • CSS Marquee: multiple paragraphs overlaps
  • I want to align search bar to extreme right
  • Getting blank white space to the left of content inside pre tags
  • My viewer.html won't load any css and jss files
  • How to apply multiple styles to HTML to only part of a title?
  • Want to make text div transparent on a parallax area
  • Is there a way to make this ID plus descendants CSS rule less specific?
  • Is there a way to drop in a stylesheet to get a Material theme or similar for all form elements on the page?
  • How do I make a sideways L look in html/css?
  • Why won't the color #e67d22e1 display in Safari?
  • How to select specific tag's attribute value with xPath?
  • How to make div rows fill available height
  • How to fix text inside a block that grows
  • svg hexagon halftone pattern
  • How to edit a website's element's background colors using a chromium extention
  • What is the main tag in HTML5 ? How does it differ from body tag?
  • My image is flowing out from my div column. How I can fix it and made the image full-size into div
  • How to draw line in react
  • Why Transition css is not working in child selector css
  • How to modify materialize css select option?
  • How to center some text in a rectangle in CSS?
  • How do I equally space out css grid columns?
  • How to make sure all the parts of a macro are running correctly?
  • How to adjust the zoom of website at different browser at different screen size?
  • Can't set max height on child div properly
  • Why background color is not applying to DIV container?
  • Need to select the first-child
  • No space between attributes in buttons
  • How can I block google from crawling my page, but still let Baidu do it?
  • Rendering html content in matToolTip (Angular)
  • Embedding an iframe when iframe height is variable
  • How to use 'word-break: break-word' with link inside of text?
  • How I can animate circular progress bar from left to right?
  • Angular 6 - How can I hide a div onclick of outside of that div
  • How to fill an inline-block div with a solid color?
  • Form file doesn't align with rest of form
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com