Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to enlarge pull down button for RWD mobile devices

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #178898
    Lorel
    Participant

    I have the pull down button listed on the “convert-menu-to-dropdown” listed on this site that is working on two different sites but I would like to enlarge the pull down button. I don’t see where this can be done via CSS as I’m not using the alternate nab select/option in html. I don’t write Javascript but I can read most of it and can edit it if someone can me the details.

    #178921
    Lorel
    Participant

    This is the script off the webpage mentioned above on this site. I haven’t changed anything:

     // DOM ready
     $(function() {
    
      // Create the dropdown base
      $("<select />").appendTo("nav");
    
      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to page"
      }).appendTo("nav select");
    
      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
    
       // To make dropdown actually work
       // To make more unobtrusive: https://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });
    
     });
    </script>
    
    #179181
    Lorel
    Participant

    I did some added research and found out that the pull down button is controlled by the browser. Does anyone know of a way to force the browser to make the button larger?

    #179278
    Lorel
    Participant

    Hi Soronbe

    thanks for trying to help but I’m not using a select tag. I’m working on a small site and therefore using the full menu/nav which is controlled by the javascript posted above which controls the “select”.

    #179280
    Lorel
    Participant

    I found a solution. The size increase goes in the CSS file for Nav Select like this:

    /* nav select activates only when device is less that 960px which is set up via media queries*/
    nav select {
    display: none;
    padding:10px;
    font-size:20px; }

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.