Help with a menu floating over an image or slider

[quinntinm 4]

Hello.

A while back with the help of Aires i managed to work out how to put a menu over an image or slider.

But i found there was a problem when the screen size was reduced for smaller mobile screens the navigation dropped below the logo and when  the logo pushed up it also then pushed the image or slider down leaving a blank space at the top of the page.

Here is what i mean - http://screencast.com/t/ZFOOXjbARG

 

I am stuck now as i am not sure how to proceed and was wondering if anyone could assist me in this regard.

Is there a better way?

 

The site is under development and has a temporary access page before you can see the rest.

To view the site first use this link:

http://millsphotography.co.za.www402.jnb1.host-h.net/jambo

 

then the home page (full screen image or slider)

http://millsphotography.co.za.www402.jnb1.host-h.net/

 

And a content page example with a smaller image or slider at the top.

http://millsphotography.co.za.www402.jnb1.host-h.net/services/wedding-photography/

 

 

Thank you.

[Danny+ 1,327]

Hi,

 

If there is an issue on mobile devices i.e. small screens, then you're likely going to need to use media queries to address the issue. However, as this is user created code our staff will be unable to provide any assistance. 

[quinntinm 4]

Hi Danny, i thought it might be solved there.

 

I understand that your staff cannot assist - i was hoping someone on the forum might be able to help me...

[Aires 265]

Hi, quinntinm  

Maybe this can get you going in the right direction.

 

@media screen and (max-width: 768px) {

    /*your mastehead class you have*/ 

    .masthead {

        position:relative;

        top:-200px!important;

        margin-bottom:-200px!important;

    }

    /*mobile menu button*/

   #site .navbar .nav-btn-navbar {

   top: -85px;

   background-color: white;

}

}

 

~Aires

[quinntinm 4]

Aires again, you are a rockstar - thank you so much!

Can i put the above into the .css or should it go into the .less file?

[Aires 265]

You can add this to the .css or you view it in google dev tools if you know how just to see what the above code will do when the screen gets smaller than 768 before you add it to your CSS
Sent from my Windows Phone using Tapatalk