- This topic has 16 replies, 3 voices, and was last updated 3 years, 7 months ago by David.
-
AuthorPosts
-
September 4, 2020 at 8:25 pm #1431414Shami
I just wished if the mobile menu icon looked something like copyblogger.com
Is it possible to achieve that? Because right now that mobile icon looks too simple and hardly grabs any attention.
September 4, 2020 at 9:18 pm #1431447ElvinStaffCustomer SupportHi Shami,
You can start by trying to replicate the font style looks through WP Admin > Appearance > Customize.
For font color:
go to Color > Primary Navigation.For layout:
go to Layout > Primary Navigation.For typography:
go to Typography > Primary Navigation.For other styles that can’t be achieved through this, you can use WP Admin > Appearance > Customize > Additional CSS.
Let us know if it works for you.
September 4, 2020 at 9:28 pm #1431455ShamiI don’t really want to replicate it. That was for reference. I want to make the icon look like button in mobile. I guess it can’t be achieved with the current available options in the Customize.
It’ll probably require additional css.September 4, 2020 at 9:32 pm #1431456ShamiIt should stand out like a button.
September 5, 2020 at 4:12 am #1431681DavidStaffCustomer SupportHi there,
try this CSS:
#mobile-header .menu-toggle { line-height: 45px; border: 2px solid #000; /* Change #000 for border color */ border-radius: 45px; margin-right: 0.8em; background-color: #f00; /* Change #f00 for background */ color: #fff; /* Set text and toggle color to white */ }
September 5, 2020 at 6:45 am #1431816ShamiThat looks good. It just has padding issue. Even after doing changes in the layout settings, the padding just won’t work. The border touches the edge of the screen on the right. How do I fix it?
The only CSS I used earlier was:
@media (min-width:769px) {
.site-branding {
display: inline-block;
}.site-logo {
float: left;
margin-right: 20px;
margin-left: 10px;
}I used this css to make the logo and the menu in a single line.
September 5, 2020 at 7:06 am #1431840DavidStaffCustomer SupportI updated the CSS here to include some margin-right
September 5, 2020 at 7:19 am #1431854ShamiThat worked. Thanks a lot. I want to add divider lines between each menu item in mobile. Is it possible?
September 5, 2020 at 7:28 am #1431861ShamiAlso, I just observed another problem. When I try to increase the font size of primary navigation in mobile, the menu icon stacks below the site title due to responsiveness. Any fix?
Please note that this only happens when the site title font-size is increased. I decreased that a little and this issue is fixed.So now I just have to add the lines between mobile items to separate them as it looks so plain in design.
September 5, 2020 at 8:13 am #1432033DavidStaffCustomer SupportThe only fix to stop things from wrapping to a new line, without removing padding, is to reduce the font size – like you did for the Site Title – you can do the same for the Primary navigation.
Try this CSS:
#mobile-header li { border-bottom: 1px solid #000; }
September 5, 2020 at 8:18 am #1432036ShamiLooking good. I just have to add margin from both sides. As the border is from edge to edge.
September 5, 2020 at 8:21 am #1432037ShamiI added this:
margin-right: 35px;
margin-left: 35px;It’s looking good now.
The last part: How to fill the menu box with color? I mean inside the border of menu icon only. Plus I want to make the ‘menu’ color white and surround it with a dark solid color.
September 5, 2020 at 8:43 am #1432065DavidStaffCustomer SupportI updated the CSS here:
https://generatepress.com/forums/topic/how-to-display-menu-icon-in-mobile-as-button/#post-1431681it includes comments for each of the colors.
September 5, 2020 at 8:51 am #1432072ShamiThanks David. One last thing, I want to do the same border thing for sub menu toggle. I really appreciate your awesome support.
September 5, 2020 at 9:00 am #1432080DavidStaffCustomer SupportTry this CSS:
#mobile-header .menu-item-has-children .dropdown-menu-toggle { border: 1px solid #000; background-color: #f00; color: #fff; border-radius: 50px; line-height: 50px; width: 50px; padding: 0; text-align: center; margin-right: 10px; } #mobile-header .main-nav > ul > li.menu-item-has-children>a { display: flex; align-items: center; justify-content: space-between; }
-
AuthorPosts
- You must be logged in to reply to this topic.