Home>Support>Space below the menu bar and creating a meta slider with responsive buttons

Space below the menu bar and creating a meta slider with responsive buttons

By Narinder Kaur, 9 years ago. Last reply by Andrew Misplon, 9 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].

Hello
I am using premium version of Vantage theme. If you could guide with a couple of things that would be great help. These are:
1) If I add a meta slider then white space between the menu bar and the meta slider disappears. When I add background image using page builder then there is a white space between the menu and the object. Please see home page and contact page of my website. I tried below – which I found from your replies – Appearance > Custom CSS
/* Main Container */

#main { padding-top: 0px; }
But it doesn’t work.

2) I attempted to change the background of the menu – but I cannot find the slider of colour – which I thought comes with the premium version.

) Please assist – I would like to add a meta slider on the home page but with responsive buttons. I have seen one of the template within your themes but I unable to find right now.

My website link is : http://www.nvkinterpreting.co.uk/

My order number for the premium version is Private Snippet

Thank you for time and support.

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

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

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

    Hi Narinder

    Thanks for reaching out.

    1. Add the following to Appearance > Custom CSS:

    /* Main Container */

.home #main {
padding-top: 0;
}

    There is an additional small amount of padding to be dealt with. Edit the row concerned, click Attributes top right, enter the following in the CSS Styles field (3rd and last field):

    padding-top: 0

    2. Menu colors can be set from Appearance > Customize > Theme Design > Menu.

    https://siteorigin.com/vantage-documentation/customizations/menu/

    3. In order to add items like buttons to a layer on your slider you’d need Meta Slider Pro or another slider that supports layers.

  2. 9 years, 10 months ago Narinder Kaur

    Hello Andrew

    Thank you for your such a prompt reply. The above listed code has worked very well with the home page. I need to eliminate the space below from the contact page as well.

    I attempted through Google inspect element and giving 0px in media all rather than padding = 35px then the space between the menu bar and the map on the contact form gets reduced but it does not disappear completely. Thus I would be most grateful if you could enable with the below two things:

    1) If I am added a another CSS coding then can I list underneath the coding which you had sent me for the home page. Also please assist me how I would get rid of white space on any page beneath the menu.

    2) Can I save any coding when I am inspecting through Google inspect element section?

    Thank you very much for assisting me with the menu colour and getting rid of white space on home page.

    Narinder

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

    Glad to hear we’re making progress. We’re using the body class to be specific about when we’re targeting the main div.

    The contact page has two other challenges to the CSS will look as follows:

    .page-id-13 #main {
	padding-top: 0;
}

.page-id-13 .entry-header {
	display: none;
}

.page-id-13 .panel-row-style-full-width:first-of-type {
	padding-top: 0;
}
  4. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Our Custom CSS tutorial is here, I’m sure you’ll find it interesting. Not too long:

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    After watching that I’d recommend installing our Custom CSS plugin. It replaces your current Custom CSS with a better version. It has a visual inspector which will make life much easier:

    Page: SiteOrigin CSS Editor

    To remove the #main padding on any given page you need to prefix main with the unique body class, found in the opening body tag.

  5. 9 years, 10 months ago Narinder Kaur

    Hi Andrew

    Once again thank you very much for your such a prompt reply. With the above CSS code, white space between the map and menu has been eliminated, however there is a grey area below the map which I still need to be eliminated.

    I already had CSS Editor installed. But I cannot find an inspector in the lower part of the site. Therefore I attempted to use the Google > Element …option.

    I found the below information

    Regex
    All
    Errors
    . inspector.js:218 Uncaught TypeError: Cannot read property ‘trim’ of undefined
    11
    editor.js?ver=1.0.2:487 No inspector to highlight with

    Would you be able to work out from the above error message why the inspector is not showing?

    My site http://www.nvkinterpreting.co.uk/wp-admin/themes.php?page=so_custom_css

    Once again many thanks for your assistance.

    Narinder

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

    Sure :) Edit the row in question, click Theme tab on the right and enable No Bottom Margin setting.

    Not quite following the second part, could you perhaps explain a little further?

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