- This topic has 3 replies, 2 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
October 26, 2020 at 3:16 am #1504329Sol
Hi Team!
http://healingwithzen.com/ mobile menu
Currently, we have 4 things on the mobile menu:
logo, book now button, menu, search icon.We want to have in 1 line: logo, menu, book now button. The search icon should either be the only thing centered in the second line below the logom book now and menu OR removed from this section and added inside of the menu.
October 26, 2020 at 5:56 am #1504513DavidStaffCustomer SupportHi there,
try adding this CSS:
@media(max-width: 768px) { .main-navigation .menu-bar-items { order: 20; flex: 1; display: flex; justify-content: flex-end; } .navigation-search.nav-search-active { top: 50%; } }
October 27, 2020 at 1:07 am #1505766SolHi David,
Thanks for the reply. That did not work. It pushed the menu button down to a second line on the left and then the magnifying glass to the third line on the right.
Do you have another solution?
Here’s all the CSS we’re using if you need to reference:
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 30px;
}
}
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 35px;
}
}#mbutton {
width:105px;
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 20px;
margin-left: 20px;
margin-right: 0px;
}.slideout-navigation li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 20px;
}.slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
border: 0;
}
@media (min-width: 769px) {
.navigation-search {
top: 100%;
}
}
@media (min-width: 769px) {
.navigation-search input {
text-align: center;
}
}.slideout-navigation.main-navigation .main-nav ul li:hover>a,
.slideout-navigation.main-navigation .main-nav ul li:focus>a,
.slideout-navigation.main-navigation .main-nav ul li.sfHover>a {
color: #000 !important;
}October 27, 2020 at 3:44 am #1505920DavidStaffCustomer SupportThe issue is, there isn’t enough room too accomodate the logo, button and Menu ( with label ) on smaller screen devices.
You could reduce the space the occupy by removing the Mobile Menu label, and using a logo that is smaller for the mobile header.
-
AuthorPosts
- You must be logged in to reply to this topic.