Main Mobile menu to look like desktop menu - Support | Kriesi.at

Tagged: mobile menu

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 11, 2015 at 1:41 pm #409822

SpaceDream
Participant

Hi again guys.

I have very good experience with this theme. Just one more thing I want to change to my website.

The look on mobile is great. I just want to make the main mobile menu look like on desktops. (not to come from the right corner like now but all the buttons to be visible once the screen is loaded)

Is that possible with css?

Thank you in advance.

March 11, 2015 at 8:50 pm #410090
Elliott
Inactive Moderator
Hey SpaceDream!

Yes but it may look a little weird and cramped depending on the size of the screen. Try adding this to your custom CSS.
```
#mobile-advanced { display: none !important; }
nav.main_menu { display: block !important; }
```
Cheers!
Elliott
- This reply was modified 9 years, 8 months ago by Elliott.
March 16, 2015 at 11:59 am #412038

SpaceDream
Participant

Hi,

this code blocks the menu. When I click on the icon to show the mobile menu nothing happens.

I actually wanted this mobile icon to disappear and the normal website main menu to appear, just smaller.]

Thanks

March 16, 2015 at 2:22 pm #412130

Yigit
Keymaster

Hi!

Can you please post the link to your website so we can see what type of header you are using?

Regards,
Yigit

March 19, 2015 at 1:31 pm #414353

SpaceDream
Participant

http://waterworldwaterpark.com

Thank you

March 20, 2015 at 4:28 pm #415357
Elliott
Inactive Moderator
Hi!

It looks like you removed the code.

If your just wanting to have the mobile menu display on larger screens then you could try this.
```
@media only screen and (max-width: 959px) {
#mobile-advanced { display: none !important; }
nav.main_menu { display: block !important; }
}
```
Otherwise take a screenshot and highlight what your trying to do so we can get a better idea.

Best regards,
Elliott
March 27, 2015 at 12:07 pm #419221

SpaceDream
Participant

Actually I want the opposite :)

I want The normal website menu to display on smaller screens instead of the mobile menu.

Thanks

March 29, 2015 at 4:36 pm #420000
Ismael
Moderator
Hi!

Use this to show the default menu items:
```
@media only screen and (max-width: 959px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: none;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: block;
}

.responsive #header_main .inner-container, .responsive .main_menu {
  position: relative;
}
}
```
There will be not enough space to contain the default menu items. Redesigning the default menus on mobile will require custom modification that is beyond the scope of support. Please hire a freelance developer or contact our customization partner: http://kriesi.at/contact/customization

Cheers!
Ismael
March 30, 2015 at 12:14 pm #420355

SpaceDream
Participant

Nothing happens when I put this code. Only the mobile menu is there…

April 1, 2015 at 5:12 am #421733
Andy
Inactive Moderator
Hi!

I checked your website and I can see that you are not using the code. For example this code from Ismael:
```
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: none;
}
```
on your website is still set to
```
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: block;
}
```
Please put the code in your Quick CSS and clear browser cache afterwards. Make sure to deactivate caching of any caching plugin at first.

Best regards,
Andy
April 3, 2015 at 3:47 pm #423109
SpaceDream
Participant
This is the CSS I currently have.
```
li#menu-item-429 span.avia-menu-text {
background: #c60e0e !important;
}

li#menu-item-434 span.avia-menu-text {
background: #f86931 !important;
}

li#menu-item-439 span.avia-menu-text {
background: #ffa800 !important;
}

li#menu-item-447 span.avia-menu-text {
background: #2a7bd5 !important;
}

li#menu-item-450 span.avia-menu-text {
background: #bb28c6 !important;
}

li#menu-item-358 span.avia-menu-text {
background: #f03982 !important;
}

li#menu-item-360 span.avia-menu-text {
background: #c60e0e !important;
}

#top #header_meta a, #top #header_meta ul, #top #header_meta li, #top #header_meta .phone-info { color: #ffffff; border-color: #888888; }
#top #header_meta, #top #header_meta nav ul ul li, #top #header_meta nav ul ul a, #top #header_meta nav ul ul { background-color: #000000; }

#header_meta { background-color: black !important; }

@media only screen and (max-width: 990px) { #wrap_all { position: relative !important; }}

@media only screen and (max-width: 959px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: block;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: none;
}

.responsive #header_main .inner-container, .responsive .main_menu {
  position: relative;
}
}
```
I have changed “block” with “none” as you said, but nothing happened…
April 5, 2015 at 6:30 pm #423686
Andy
Inactive Moderator
Hi!

so you are using this code:
```
@media only screen and (max-width: 959px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: block;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: none;
}
```
which is wrong, because 1.) you want to hide mobile menu and use normal menu instead (right?) and 2.) because a bracket is missing in the code. Replace the code with this one:
```
@media only screen and (max-width: 959px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: none;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: block;
}}
```
Hope this helps.

Cheers!
Andy
April 14, 2015 at 5:18 pm #428352

SpaceDream
Participant

Hi is still the mobile menu…

thanks

April 15, 2015 at 5:11 pm #429066

Elliott
Inactive Moderator

Hi!

I recommend just leaving the mobile menu alone. If you display the regular menu then your links are going to display on top of each other and hide your main content because there just isn’t enough space on smartphone screens.

Regards,
Elliott
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.