top menu bar after “fix-position” is overlapping the image!!

[dazdseg]

Hi,

I have a top bar (which i have given margin-top:5%;” ), i need this to be fixed on the top. But when i use (position:fixed;) – i have a whole page image after this bar, this image slides up and menu bar lands on top of it,

I do not want menu bar landing on image. i want where menu bar finishes, from there image should start?
(any ideas what i am doing wrong?????)

[Paulie_D]

Do you have a link?

[CodeGraphics]

Give margin-top:100px or more to the image so that it will come down and there will be a breathing space between the image and menu bar.

[Paulie_D]

That probably won’t work if it’s a bg image as would seem to be implied.

> i have a whole page image after this bar

[dazdseg]

http://codepen.io/dazdseg/pen/tdJhB

[Kitty Giraudel]

This isn’t a reduced test case. It’s full of broken images, unecessary markup and styles.
Plus, you mix both external CSS and inline-styles, making impossible for anyone to read something like this.

Please, make a pen describing your issue and only your issue. Not your whole site.

[dazdseg]

okay Hugo, i will try my level best, but lets see if i can make it.

[dazdseg]

@Hugo,Paulie, Code – Kindly go through (www.am2pm.asia/test “am2pm.asia/test1”)

I tried making a pen as u stated but unable to run everything separately. What happens is.

1) Whenever user clicks on “MENU” -> home (the screen will come back to homepage, but this time the image of home slides down the top fixed menu bar. this makes the 2nd image to show up and this is what i am not looking for. I made a query for it. will paste here.
var pos;
pos = document.getElementById(‘header’).scrollHeight;

function myFunction(pos) {
document.getElementsById(‘home’).style.marginTop = pos;

}

But i am not sure why this is not working. or is there any more better approach than this. please guide me on this.

2) I have made a up & down arrow (fixed) at the bottom bar. and i don’t know how to make sure that when i click on up it goes to the top of the image (full image scroll and position of the image will start from the end of the mousebar), I am sure there is a way to do it in with JS. (as i am new to JS) i have made one but that is also not working.

$(document).ready(function(){
var pos= $(‘body’).scrollTop();
if (pos<=600px) {
$(“#arrow1”).attr(‘href’, “facebook.com”);
} else {
$(“#arrow1”).attr(‘href’, “google.com”);
}
});

and another approach that i followed is ::

A second Alternative Here :

$(function() {
$(‘#arrow1’).click(function(event) {
event.preventDefault();
$mytextbox = $(this).next(“img”);
$mytextbox.scrollTop($mytextbox.scrollTop() + 100);
});
});

[dazdseg]

kindly check my first fiddle – jsfiddle.net/dazdseg/MFEJr

My questions: 1) when i use (MENU) – button (a li that i have made in the top bar) – the 1_4.jpg, image crawls under the fixed menu tab. (i need to stop it because thats leading to cutting of the image from top.) 2) how can i use below fixed arrows (up and down) to scroll between different images, i have made a jquery but its not working properly. any ideas how?

[Author]

Posts