This topic contains 2 replies, has 2 voices, and was last updated by  theanimalix 3 days, 3 hours ago.

Make Quick Navigation Trigger Circle/Icon and Menu Width Smaller


  • theanimalix
    Participant

    Posts: 37
    Member Reply #10454

    I wanted to make the quick nav trigger circle smaller (because it’s covering too much content), but kind of having problems to make it look good, since icon is not centered (https://www.screencast.com/t/DIxK7bm8) and the underlying menu that gets opened seems to get broken as well (dimension of circle is not equal to menu width). I wanted to change the trigger circle from 60 px to around 30-40px.

    Could you please suggest where exactly do I need to make changes to make it smaller but still look nice?

    • This topic was modified 4 days, 20 hours ago by  theanimalix.
    Sean
    Sean
    Keymaster

    Posts: 3576
    Support Staff Reply #10464

    Hi,

    Please use below code in your custom.min.css in order to change the quick toolbar icon toggle size:

    .quick-nav-trigger {
    height: 40px;
    width: 40px;
    }

    .quick-nav .quick-nav-bg {
    width: 40px;
    height: 40px;
    }

    Thanks.


    theanimalix
    Participant

    Posts: 37
    Member Reply #10467

    Thanks for quick reply. I think I forgot about “.quick-nav-bg” one, but looks great now.

    Beside overriding those, one would also want to align menu icons with this:
    .quick-nav ul > li a > i {
    right: 14px
    }

    • This reply was modified 3 days, 3 hours ago by  theanimalix.
    • This reply was modified 3 days, 3 hours ago by  theanimalix.
    • This reply was modified 3 days, 2 hours ago by  theanimalix.

You must be logged in to reply to this topic.