How do I reduce the size of my mobile menu dropdown boxes in Flow theme

Store Design
1

Store address thesilenceco.com

Theme: Flow

I downloaded a mega menu app that made my drop downs in mobile view much smaller which I like the look of. This app does not adjust the size of the drop down for the main menu.

I would like to reduce the size of the mobile main menu dropdowns to match the size of the submenu mobile dropdowns. Here are pictures to clearly illustrate the issue. Notice how the menu items on the left are larger than the submenu items on the right. I have searched for the majority of the day and have edited css unsuccessfully on a copy of the theme.

Any help would be greatly appreciated. I also want to reduce the extra space around my site footer and may hire an expert.

silence mobile menu.jpg
silence mobile menu.jpg467×828 32 KB

mobile small menu .jpg
mobile small menu .jpg478×831 44.9 KB

2

Hi there

This CSS - added to the bottom of your theme.scss file - should get you close to the result you want:

li.mobile-nav__item {
    text-align: left;
    line-height: 1em;
    text-transform: none;
    text-shadow: none;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
}

.mobile-nav__item a,.mobile-nav__item button,.mobile-nav__toggle button {
    padding: 10px 30px;
}
3

Hi @sicworldwide ,

Just add below CSS line in the bottom of the theme.scss file.

.mobile-nav__item a {
    font-size: 14px;
}

To edit the theme.scss then go to Online store > Actions ( current theme) > Edit code > Search “theme.scs”.

Please like and accept this solution if it works for you.

Thanks,

4

This worked perfectly, thank you. I am very appreciative of you taking your time to help.