Home / Forums / You Theme Support / Display submenu items side by side

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • evankasi
    Participant

    I was wondering if you can help us on a site that we are building, based on You template.
    We would like to change the appearance of the menu/submenu and we are wondering if this is feasible :

    1. Display the menu items next to the logo (logo left and next to it the menu)
    2. Display the submenu items side by side (and not one on top of another)
    3. When clicking on a menu item display the submenu items permanently.
    4. Change the size of social icons in dock bar in mobile view (make them smaller)

    We count on your support and any suggestion on the above would be really valuable.

    Best Regards

    Hi @evankasi

    1. Display the menu items next to the logo (logo left and next to it the menu)
    ** You can do this via Appearance > Theme Options > Header

    2. Display the submenu items side by side (and not one on top of another)
    ** I think you are referring to a Mega Menu setup. If yes, here’s a guide on how to set it up: http://docs.acoda.com/you/2016/03/09/menus/

    3. When clicking on a menu item display the submenu items permanently.
    ** That is possible but it will require changes to JS and CSS of the theme which we do not have support for since it’s considered as advanced customization.

    4. Change the size of social icons in dock bar in mobile view (make them smaller)

    You can use this CSS to change the size of the social icons:

    #primary-wrapper .socialicons ul li a i.social-icon {
        font-size: 20px;
    }

    Regards,


    evankasi
    Participant

    Thank you for your prompt answer!
    everything is clear, never-the-less we have to issues Q

    1. the css class field doesn’t appear in customize screen but only to the dashboard menu settings (that’s minor if there is not a solution)

    2. Unfortunately the css you provided us, is making any changes. We tried it by inserting it to Custom CSS desktop, or Custom CSS mobile, or Style CSS to You child theme. None of these had any results and the icons in mobile view remain to the same size. We tried with various font-size (larger or smaller).

    Do you thing there is any other workaround?

    Hi @evankasi

    1. I am not quite sure what you mean with item #1. Is this related to any of the issues you first sent or this is a new issue?

    Can you please elaborate?

    2. Can you please send over your site’s URL and login credentials so we can personally check and test this?

    Regards,


    evankasi
    Participant
    This reply has been marked as private.

    Hi @evankasi

    For the CSS Classes, you just need to click on the Gear Icon beside Menus when on the Customize Page.

    It will reveal a few checkboxes and ‘CSS Classes’ is already selected.

    1. For the Social/Menu icon on mobile, copy and paste this CSS into Theme Options > Custom CSS > Mobile CSS instead:

    .header-float-wrap ul.dock-panel li.dock-tab a {
        font-size: .8rem;
    }

    You can update the size to any you prefer.

    2. It looks like you have sorted this out because when I scrolled, the sticky menu now works. Please check and confirm from your end.

    3. I disabled the Mega Menu plugins and the menu items seems to be positioned just the way you want it — right beside the logo. Have you sorted this out? If not, please send screenshots so I can check on this further.

    Regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.