Help with wordpress

Hi, I want to make my website's menu (in mobile version) just like it is in the desktop version. Take a look https://shopfever.in. In desktop version it's inline but in mobile its normal drop down menu which is not very user-friendly so I want to do it like in this article – https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

But i can't understand how so is possible that you can try to give me css if it's possible just by custom CSS. I do understand since you do not provide direct support for the theme you will have boundaries but see if can help :slight_smile:

  • Nithin
    • Support Wizard

    Hi Kirat,

    Hope you are doing good today. :slight_smile:

    Please try the following CSS:

    @media only screen and (max-width: 991px) {

    .custom-header .header-row .header-desktop {
    display: block !important;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    }

    @media screen and (max-width: 480px) {

    #masthead-inner > div > div > div.header-row.header-topbar.row-layout-row_flex.desktop-hide-on.desktop-sticky-off.mobile-hide-on.mobile-sticky-off > div > div.header-topbar-desktop.header-item-wrapper.header-desktop {
    display: none !important;
    }

    .header-element-item .search_form-inner .search_form-search-field {
    display: none;
    }

    .custom-header .mobile-hide-off .header-mobile {
    display: none;
    }
    }

    You can add the CSS under the default WordPress customizer, under Appearance > Customize > Additional CSS.

    Please let us know if you need any further assistance, have a nice day ahead. :slight_smile:

    Regards,

    Nithin

  • Kirat
    • Flash Drive

    Hi Nithin Thanks For The Code, It works but it also increases the size of the header as you can see in the picture so can we do something which makes menu scrollable but keeps the header of normal size. Also is it possible to hide progress bar? that shows how much more it can be scrolled

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.