This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to make mobile navigation menu responsive and how to remove header menu?

Resolved 7 replies theme
Matija Biljeskovic
10 years ago · Last reply by Magus 10 years ago

Hello everyone,

I would like to make the navigation menu responsive on mobile phones and also remove the menu located inside the black background header at the top right.

Could anyone provide some advice or point me in the right direction towards solving these issues?

URL: http://www.techwashuk.co.uk

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Magus Staff 10 years, 9 months ago

    Hi Matija

    To do this you will need a couple of plugins. To add CSS codes you will need this

    https://wordpress.org/plugins/simple-custom-css/

    When installed and activated navigate to the Simple CSS Editor and enter the following.

    #top-menu-bar .menu {
    display: none;
}

    This will remove the top menu from the top bar.

    To make the menu responsive for mobile you will need this plugin

    https://wordpress.org/plugins/wp-responsive-menu/

    When setting this up set the ‘Elements to Hide’ to ‘#site-navigation’ and then go to Menu Appearance.
    Set the ‘Show Menu From Width’ to 640 and the ‘Menu Width’ to 100 and then save the settings at the bottom.

    Let us know how you get on.

    Magus

  2. Matija Biljeskovic 10 years, 9 months ago

    Thank you, the instruction were clear and easy to follow. I managed to do it and all is as desired except the mobile version website slides a bit to the left and right when I swipe across the mobile screen. Could that be from the new plugins?

  3. Magus Staff 10 years, 9 months ago

    Hi Matija

    There shouldn’t be any issues with the new plugins. To test please disable the WP Responsive Menu plugin and check again.

    Thanks

    Magus

  4. Matija Biljeskovic 10 years, 9 months ago

    Hi Magus, disabling the WP Responsive Menu plugin did not cause the mobile version to not slide a bit to the left and right.

    I checked the demo version of Aviator theme on my mobile and it also slides a bit to the left and right.

    Android 4.4.2
    Model Aquaris E4.5
    Firefox for Android 37

  5. Magus Staff 10 years, 9 months ago

    Hi Matija

    Sorry for taking so long to get back to you.

    This is being caused by the margins on the feature widgets. We can fix this with some more Custom CSS.

    Please add the following.

    @media screen and (max-width:480px){
.sow-features-list {
    margin: 0px !important;
}
}

    Let us know how you get on

    Magus

  6. Matija Biljeskovic 10 years, 9 months ago

    Hello Magus,

    That worked. Thank you.

    Is there a paypal account I can donate to for your expertise?

  7. Magus Staff 10 years, 9 months ago

    Hi Matija

    Unfortunately there is nothing in place to take donations at the moment. We will be having a small crowd fund raising campaign in the near future. If you sign up to the newsletter you can hear more when that is ready.

    Page: SiteOrigin – Free WordPress Themes and Plugins

    Thank you for your support and if you need any help in the future please feel free to open a new support thread.

    Magus

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread