- This topic has 4 replies, 2 voices, and was last updated 6 years, 11 months ago by skynet.
Viewing 5 posts - 1 through 5 (of 5 total)
-
AuthorPosts
-
December 24, 2017 at 9:13 pm #128601skynetParticipant
Hello great catch team! I wish you Merry Christmas OhOhOh 🙂
I have a question, Is there any way to show mobile menu “drop down menu
” on desktop instead the standard menu desktop ?Thank you!
December 26, 2017 at 12:19 am #128625tikaramParticipant@skynet : Happy Holidays.
To enable mobile menu on desktop add the following additional css.#primary, #secondary, #site-generator .copyright, #site-generator .powered { display: block; float: none; width: 100%; } #nav-below { border-bottom: 1px solid #ccc; } #access ul.menu a, #access-secondary ul.menu a, #access-footer ul.menu a { font-size: 15px; line-height: 3em; padding: 0 20px; text-align: left; } #access ul.menu ul a, #access-secondary ul.menu ul a, #access-footer ul.menu ul a { font-size: 15px; line-height: 1.66em; } /* Menu */ .menu-access-wrap { background-color: #3d3d3d; clear: both; display: block; padding: 0; position: relative; } #access, #access ul.menu ul a, #access-secondary, #access-secondary ul.menu a, #access-secondary ul.menu ul a { background: none; background-color: #3d3d3d; color: #eee; border: none; } #access ul.menu li:hover > a, #access ul.menu a:focus, #access-secondary ul.menu li:hover > a, #access-secondary ul.menu a:focus, #access-footer ul.menu a:hover, #access-footer ul.menu a:focus { background: none; background-color: #333; color: #fff; } #mobile-footer-menu { padding: 0; } .site-header-menu, .site-footer-menu { display: none; width: 100%; } .mobile-menu-anchor { display: inline-block; } .primary-menu-open #site-header-menu-primary, .secondary-menu-open #site-header-menu-secondary, .footer-menu-open #site-footer-mobile-menu { display: block; } #access ul.menu li, #access-secondary ul.menu li, #access-footer ul.menu li { border-left: none; float: none; } .menu-access-wrap #access ul.menu li, .menu-access-wrap #access-secondary ul.menu li, .menu-access-wrap #access-footer ul.menu li { border-bottom: 1px dotted #ccc; } .menu-access-wrap #access .toggled-on li:first-child, .menu-access-wrap #access-secondary .toggled-on li:first-child, .menu-access-wrap #access-footer .toggled-on li:first-child { margin-top: 1px; } .site-header-menu #access .menu-item-has-children > a, .site-header-menu #access .page_item_has_children > a, .site-header-menu #access-secondary .menu-item-has-children > a, .site-footer-menu #access-footer .menu-item-has-children > a { margin-right: 45px; padding-right: 0 } #access ul.menu ul, #access-secondary ul.menu ul, #access-footer ul.menu ul { position: relative; box-shadow: none; } #access ul.menu ul, #access ul.menu ul ul, #access-secondary ul.menu ul, #access-secondary ul.menu ul ul, #access-footer ul.menu ul, #access-footer ul.menu ul ul { left: auto; position: relative; top: auto; width: 100%; } #access ul.menu ul li:hover > ul, #access ul.menu ul li.focus > ul, #access-secondary ul.menu ul li:hover > ul, #access-secondary ul.menu ul li.focus > ul, #access-footer ul.menu ul li:hover > ul, #access-footer ul.menu ul li.focus > ul { left: auto; top: auto; width: 100%; } #access ul.menu ul a, #access-secondary ul.menu ul a, #access-footer ul.menu ul a { width: auto; padding-left: 30px; } #access ul.menu ul ul a, #access-secondary ul.menu ul ul a, #access-footer ul.menu ul ul a { padding-left: 40px; } #access ul.menu ul ul ul a, #access-secondary ul.menu ul ul ul a, #access-footer ul.menu ul ul ul a { padding-left: 50px; } #access ul.menu ul ul ul ul a, #access-secondary ul.menu ul ul ul ul a, #access-footer ul.menu ul ul ul ul a { padding-left: 60px; } .site-header-menu #access ul ul, .site-header-menu #access-secondary ul ul, .site-footer-menu #access-footer ul ul { display: none; } .site-header-menu #access ul .toggled-on, .site-header-menu #access-secondary ul .toggled-on, .site-footer-menu #access-footer ul .toggled-on { display: block; } .dropdown-toggle { background-color: transparent; border: 0; border-radius: 0; color: #eee; content: ""; cursor: pointer; display: block; height: 45px; padding: 0; position: absolute; right: 0; text-transform: none; top: 0; width: 45px; } .dropdown-toggle:after { border: 0 solid #eee; border-left-width: 1px; content: "\f431"; font-size: 24px; left: 1px; position: relative; width: 45px; } .dropdown-toggle:hover, .dropdown-toggle:focus { background-color: #333; } .dropdown-toggle:focus { outline: thin dotted; outline-offset: -1px; } .dropdown-toggle:focus:after { border-color: transparent; } .dropdown-toggle.toggled-on:after { content: "\f432"; } .one-menu .menu-access-wrap, #colophon .menu-access-wrap { text-align: center; } .one-menu #mobile-header-left-menu { float: none; transition-property: left, right; transition-duration: 3s, 3s; transition-delay: 0s, 1s; } .mobile-footer-nav-open #colophon .menu-access-wrap { left: 0; position: absolute; top: 0; z-index: 999; } #mobile-header-right-menu .mobile-menu-text { float: left; }
Let me know if this resolves your issue.
Regards,
TikaramDecember 26, 2017 at 12:28 am #128626skynetParticipantThank you Tikaram, the code working well, but it’s a huge “Additional CSS”. Can this huge css impact page loading?
December 26, 2017 at 3:28 am #128634tikaramParticipant@skynet : It will not have any impact on page loading time. Let me know if you have any further issues.
Regards,
TikaramDecember 26, 2017 at 3:04 pm #128660skynetParticipantThank you for help Tikaram!
-
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
- The topic ‘Show Mobile Menu On Desktop’ is closed to new replies.