How to change Pages widget (Pagelist) into a responsive dropdown menu

How to change Pages widget (Pagelist) into a responsive dropdown menu on the mobile display - Another impact after making default Blogger template being responsive is the menu display Pagelist be stacked and irregular, especially on mobile screens. Sure it looks unattractive. To make it look neat and attractive, we need to change the display of Pagelist menu being Dropdown menu, specifically for mobile display. So, Dropdown menu appears only on mobile, for desktop unchanged. The result you can see in the picture below.

please follow the tutorial how to create a Pagelist menu (Pages widget) to become dropdown menu on mobile display.

1. So that we can control the menu Pagelist, we need a new id to be inserted into the working scheme Pagelist menu. Please sign in to edit HTML template and locate the code below (or similar).

<b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>⋯</b:widget>

Open, until you can see the pattern of Pagelist menu. Then copy the code below and paste it just above the code <ul>.

<div id='laman'>
<input type='checkbox'/>
<label>
&#8801;
</label>

Then plug the closing </div> just below </ul>.
The final result will look like the following pattern.

<b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>
  <b:includable id='main'>
.......
.......
    <div id='laman'>
        <input type='checkbox'/>
        <label>
            &#8801;
        </label>
        <ul>
.......
.......
        </ul>
    </div>
........
........
  </b:includable>
</b:widget>

2. Copy the css code below and paste it just above the code ]]></b:skin>

/*Menu laman*/
#laman {
background: transparent;
position:relative;
}
#laman input {
display: none;
margin:0 0;
padding:0 0;
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}
#laman label {
font: bold 45px Arial;
display: none;
width: 45px;
height: 41px;
line-height: 41px;
text-align: center;
}
#laman ul,
#laman li {
width: auto;
margin: 0;
padding: 0;
list-style: none;
z-index: 100;
}
#laman li {
position: relative;
display: inline;
}

3. Copy the css code below and paste it right under @media screen and (max-width: 768px) {

#laman {
border: 3px solid #000000;
height: 40px;
}
#laman ul {
display: none;
top: 100%;
right: 0;
left: 0;
height: auto;
position: absolute;
}
#laman ul.menus {
width: 100%;
position: static;
border: none;
}
#laman li {
display: block;
float: none;
text-align: left;
}
#laman a {
display: block;
line-height: 40px;
padding:0 14px;
text-decoration: none;
color: #000000;
}
#laman li a {
border-bottom: 1px solid rgba(0, 0, 0, .1);
background: #eeeeee;
}
#laman input,
#laman label {
color: #000000;
display: block;
position: absolute;
right: 0;
}
#laman input {
z-index: 4;
}
#laman input:checked + label {
color: #000000;
}
#laman input:checked ~ ul {
display: block;
}

In this tutorial, dropdown menu, appears when the blog was opened on devices with screen sizes 768px and underneath. You can adjust the appearance of the menu Dropdown, to put css code above in size @media screen according to your wishes.

4. Save Template.

Next: How to change Blogspot Next page with numbers

That's tutorials how to change the menu view Pagelist of inline type into dropdown / checkbox on a mobile display.