- This topic has 3 replies, 2 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
October 26, 2020 at 3:16 am #1504329
Sol
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 #1504513David
StaffCustomer 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%; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 27, 2020 at 1:07 am #1505766Sol
Hi 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 #1505920David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.