How to set Navigation Menu buttons appear all for devices

Travelify
1

Hi. I would like to ask if how can I make all my navigation buttons appear in 1 page? I made 3 buttons so I don’t need to do it as dropdown Menu in any mobile devices. Since the default is Dropdown, I would like to change it. I tried to edit the .css codes inside with @media functions but i don’t think im on a right codes when im doing it. Please help me.Thank you.

2

Revert all your changes you attempted to do and instead add this code to Theme Options - Other - Custom CSS

@media only screen and (max-width: 767px) {
  #main-nav ul {
    display: block;
  }
  #main-nav select {
    display: none;
  }
  #main-nav {
    height: inherit;
    padding: inherit;
  }
}
3

Thank you so much for your reply…It works normally now but I was concern about the width of each button. It seems that each button appeared the whole width of the mobile screen. How can I make the width smaller so that the 3 buttons will appear in one row(3 columns) and not 3 rows in screen? Thank you.

4

It shouldn’t happen unless your menu items are too long and they just can’t fit. If this is not the case, please provide your website URL and I will look into it.

5

Please try to check 54.69.110.54 in mobile browser.thank you…Because I want the three buttons in 1 row.

6

Replace my previously given code with this one:

@media only screen and (max-width: 767px) {
  #main-nav ul {
    display: block;
  }
  #main-nav select {
    display: none;
  }
  #main-nav {
    height: inherit;
    padding: inherit;
  }
  #main-nav a {
    min-width: 50px;
  }
}
7

Thank you so much. It works fine now… I appreciate it.