WordPress-从div分离导航栏所需的CSS帮助

Question

This is my current website: jigsawcreations.net As you can see, it looks normal on a monitor, but whenever you resize the screen to an iPhone for instance, some content of the slider gets hidden by the navbar. I currently have no margins or paddings between any elements from the .main or the navbar, yet it still gets changed with different resolutions. I tried inspecting the HTML code many times on the page to see what could be causing this, but I failed.

Thanks in advance!

Edit: I see that the navbar and the .main get caught up as they are both part of body. They are both set as blocks, but navbar is fixed. Could this be the cause?

Answer 1

You need to change the display on your navbar from fixed to relative.

.navbar-fixed-bottom, .navbar-fixed-top{
    position: relative;
    right: 0;
    left: 0;
    z-index: 1030;
}

Answer 2

I see there's JavaScript in place to automatically shift down the .main container so it begins below the .navbar (it looks like this when you inspect, and changes when you resize: <div class="main" style="margin-top: 114px; min-height: 1px;"> ).

But, then you have custom CSS on a WP plugin that's preventing that margin-top from taking effect (found in this file ):

div.main {
    margin-top: 0px!important;
}

Remove that custom CSS override to let the JS do its thing, and your slideshow will always begin below the navigation bar, instead of overlapping underneath it.

Answer 3

How about pushing the slider div down?

div#n2-ss-2-align {
    margin-top: 74px;
}

If you decide to go this route you will have to set different margin value for different screen size for when your header changes the height.