Navigation
Archive / nav item border in mobile menu
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • July 18, 2016 at 11:28 pm #1092907
    yhshin1020
    Participant

    Hey,

    I’m using Icon and I want to make several customisations to the mobile nav items.

    1) remove border around nav items

    2) have a single full width line under each nav bar item

    3) align all texts to right (text-align)

    Thank you.

    July 18, 2016 at 11:31 pm #1092909
    yhshin1020
    Participant
    This reply has been marked as private.
    July 19, 2016 at 2:18 am #1093039
    Christopher
    Moderator

    Hi there,

    Please add following code in Customize -> Custom -> CSS :

    .x-navbar .mobile .x-nav li>a,.x-navbar .mobile .x-nav>li.x-menu-item-search>a {
    border: none;
    border-bottom: 1px solid #efefef;
text-align: right;
    padding-right: 31px;
}

    Hope that helps.

    July 19, 2016 at 2:29 am #1093047
    yhshin1020
    Participant

    Hey,

    thanks!

    how do i replace the double arrow on the mobile menu with a single arrow?

    thanks!

    July 19, 2016 at 3:03 am #1093088
    Rupok
    Member

    Hi there,

    You can use this CSS :

    .x-sub-toggle [data-x-icon]::before {
  content: "\f107 ";
}

    Note that it might not work within Customzier > Custom > CSS. Try placing this within Child Theme‘s style.css.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1092907 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>