Tagged: mobile menu
-
AuthorPosts
-
March 11, 2015 at 1:41 pm #409822
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 #410090Hey 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, 9 months ago by Elliott.
March 16, 2015 at 11:59 am #412038Hi,
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 #412130Hi!
Can you please post the link to your website so we can see what type of header you are using?
Regards,
YigitMarch 19, 2015 at 1:31 pm #414353March 20, 2015 at 4:28 pm #415357Hi!
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,
ElliottMarch 27, 2015 at 12:07 pm #419221Actually 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 #420000Hi!
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!
IsmaelMarch 30, 2015 at 12:14 pm #420355Nothing happens when I put this code. Only the mobile menu is there…
April 1, 2015 at 5:12 am #421733Hi!
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,
AndyApril 3, 2015 at 3:47 pm #423109This 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 #423686Hi!
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!
AndyApril 14, 2015 at 5:18 pm #428352Hi is still the mobile menu…
thanks
April 15, 2015 at 5:11 pm #429066Hi!
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 -
AuthorPosts
- You must be logged in to reply to this topic.