Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #45063
    dazdseg
    Member

    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?????)

    #136306
    Paulie_D
    Member

    Do you have a link?

    #136307
    CodeGraphics
    Participant

    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.

    #136310
    Paulie_D
    Member

    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

    #136428
    dazdseg
    Member
    #136437
    Kitty Giraudel
    Participant

    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.

    #136516
    dazdseg
    Member

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

    #136517
    dazdseg
    Member

    @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);
    });
    });

    #136550
    dazdseg
    Member

    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?

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.