Homepage - How to move slider revolution below menu

edited August 2018 in Theme support
Hello, 

I'm trying to move the default slider revolution on the homepage to "Below" my menu (see below link illustration), and NOT over lapping it like how it is right now.


I've looked everywhere in the theme setting but still couldn't find where to change it.

the closet I've tried is adding this in my css: 

@media (min-width: 768px) {
header {
        padding-top: 120px; 
}
}

But this code make the rest of my pages' menu bar's height increase, which I do not want.

Please advise how to fix it. 

Much appreciated!



p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545}
span.Apple-tab-span {white-space:pre}

Comments

  • Hi,
    To make header(menu) not overlapping.
    Please go to Theme Options > Header & Subheader > Header
    Find the minimalist option and turn it off.

    Do not forget about disabling your custom css for header.
    Thanks.
  • edited August 2018
    Hi, 
    I did that, and it didn't help. and I had disabled custom css for header..
    https://drive.google.com/file/d/1Faf7QsdMChSqR2foBBmbqw9o5E8pTNEW/view

    Please have a look now:
    Homepage Link: http://pipllc-design.com/

    I think it has to do with the "simple" layout that I chose. which makes the menu transparent and overlap with the background image..
    I purposely want to hide the menu to the side.... and the "simple" layout is the closest options, but because I do not want the menu to overlap my background image.. so I've add a code to give the menu a solid background color, but now it is blocking my background image.. and I couldn't just change my background image to fix it (ex: give the design more top space), because on the mobile version the menu and background are NOT overlapping, so if I were to change the background image, the website will still look weird on the mobile..

    So my question now is It is possible to write a code to move the background image down without also moving the menu bar?
    I've tried it, but I could't locate the right css class name for just the background image..

    Your help is much appreciated!

  • edited August 2018
    Hi,
    With custom CSS it's working fine but not for desktop devices.
    @media (min-width:767px){
    #mfn-rev-slider{
    padding-top:100px !important;
    }
    }
    Can you make bigger space on top of this slide for a test.

    Thanks
Sign In or Register to comment.