Home>Support>Special responsive menu for small screen devices.

Special responsive menu for small screen devices.

By Renato Gelforte, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

We recently bought the professional version of Vantage theme because we were unsatisfied of the menu display on mobile.

In the free version, the titles of the menu were flowing with no control and they fill a wide area of the mobile screen.
Even worst, since the logo, the motto and the menu area, are filling completely all the mobile screen, you don’t realize that pages change when you hit a menu voice.

That’s not the best we wish.

We thought that the professional version should allow us to choose a better way to display a menu for mobile screen.
But we get worst.

May be we are doing in a wrong way or even, we may not understand well how to choose (in case we are allowed to) a good way to display menu voices in a mobile screen.

Right now, if we choose Theme Setting>> Navigation>>enable responsive menu, we get a button with “menu” wrote on it.
And that is good because it prevents the wide fill of the screen populated by all the menu voices,

But when you click on it, you get a black screen with search field on it!

How can I prevent that the search field appear? and how can I control the color and the width of the overlay menu?

Any suggestions will be appreciated!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Renato

    The Vantage mobile menu unfortunately isn’t customisable from within theme options. If you’d like to remove the mobile search field you can insert the following under Appearance > Custom CSS:

    /* Hide Search In Mobile Nav */

.mobile-nav-frame form.search input[type=search] { display: none; }

    Unfortunately the same goes for the mobile menu color scheme. If you’d like to climb in at a CSS level you can insert the following under Appearance > Custom CSS and then customise the colors listed as required:

    /* Mobile Nav */

.mobile-nav-frame {
background: #222222 !important;
}

.mobile-nav-frame .title h3 {
color: white !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important;
}

.mobile-nav-frame ul {
background: #212121 !important;
border: 1px solid #111 !important;
}

.mobile-nav-frame ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-frame ul li a.link {
color: #F3F3F3 !important;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important;
}
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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More