Home › Forums › JavaScript › How to enlarge pull down button for RWD mobile devices
- This topic is empty.
-
AuthorPosts
-
August 13, 2014 at 8:50 am #178898LorelParticipant
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.
August 13, 2014 at 11:48 am #178921LorelParticipantThis 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>
August 15, 2014 at 8:19 am #179181LorelParticipantI 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?
August 16, 2014 at 9:46 am #179278LorelParticipantHi 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”.
August 16, 2014 at 9:59 am #179280LorelParticipantI 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; } -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.