Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 31, 2020 at 8:00 am #1180172
    tonyiatridis

    hi guys,

    On the mockup:

    Home

    I have hid the regular menu and used a full width submenu on each page as I want just the menu to be sticky. This is working nicely, I figured out the css and settings. However I’m failing miserably at writing css for the mobile version to act in the same manner and pulling out my hair (not really)…

    On the mobile version view the menu icon appears as a white button on the orange menu bar and I need it just be white and have no border.

    Also I need to hide the main menu here as well it is coming in as a second menu icon and I need just the full width submenu menu bar to be sticky on the mobile version as well. Crap, I also just noticed a gap between the menu and the content on the mobile version.

    Oy! What are your suggestions? See screen grab for clarification here:

    https://nycartdirector.com/swimworld/wp-content/uploads/2020/01/menu.jpg

    Thanks so much, you guys are the best. Soon will be up to ten licenses and it’s because of the support and that I find just about anything is possible with Enfold.

    Tony

    February 4, 2020 at 5:07 am #1181145
    Ismael

    Hey tonyiatridis,

    Thank you for the inquiry and for making Enfold the theme of your choice.

    Regarding your inquiries, you can use the following css code to adjust the style of the full submenu button and remove the gap above the main content.

    @media only screen and (max-width: 767px) {
    #top .main_color .mobile_menu_toggle {
	color: #ffffff;
	background: transparent;
	border: 0;
    }

    #top .sticky_placeholder {
	position: absolute;
    }
}

    Unfortunately, we can’t make it sticky on mobile view without adding a custom script or a whole lot of modifications.

    Please don’t forget to toggle the Performance > File Compression settings after adding the code, only if it’s enabled.

    Best regards,
    Ismael

    February 4, 2020 at 8:33 pm #1181514
    tonyiatridis

    Hey Ishmael,

    I’m thinking the solution if the mobile version can’t be sticky is to just hide the full width submenu on the mobile version and enable the regular menu which I already hid on the desktop version. Figured out the css to do this, thanks for your help.

    Tony

    February 4, 2020 at 8:52 pm #1181523
    Jordan Shannon

    Hi,

    Did you need additional help with this topic?

    Best regards,
    Jordan Shannon

    February 4, 2020 at 11:02 pm #1181575
    tonyiatridis

    Nope all good, the solution is for the sticky sub menu head on the desktop and the regular mobile menu. Thanks so much.

    February 5, 2020 at 1:18 pm #1181741
    Rikard

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to style full width submenu menu icon in mobile view’ is closed to new replies.