CSS Combat – Fixed header with anchor links scrolling

[for8aby]

Hey there! I’m having the following issue I’m trying to deal with for 1 day so far. I got this header containing the navigation having a transparent background. The navigation is anchor links based since the content of the pages will slide in, so everything is on the same page. The navigation is based on DIVs IDs. Now the main issue I’m having is that when I’m using a relative position on the header with the nav, when clicking on an anchor link on small screens, the link will take me to the anchor div but will also hide the header with the nav. However, if I give a fixed position to the header and then use margin-top to the next div (the content div), it will pop up nicely with the header on top and then the content on every device. However, since my navigation has a transparent background and text color is white, it will not be visible when scrolling the page, since the page has a white background as well. Now there are two possible fixes to this problem: 1. use Jquery to scroll the anchor links/divs – which I couldn’t succesfully implement so far. I put my hand on a couple of scripts but none of them work the way they’re supposed to whatsoever. 2. I was thinking of placing another fixed-position div just before the header div, and give the header an relative positioning. Figuring to recreate the fixed position nav situation. However, when I do that and I put the header and the rest of the content in another div, that new content div takes its margin from the top of the window, instead from the top of the fixed positioned div. And can’t figure it out why.

Here is some code:

<

div id="overall-wrap"> <!-- Header with Navigation -->

<div>
  <p>
    some text
  </p>
</div>

<!--fixed position div-->

<

div id="content-wrap"> <!--content div-->

<div>
  code
</div>

<div>
  <content
</div>

</div>

<!--end content wrap-->

CSS:

anchors{

height:50px; width:1000px; position:fixed; background-color:transparent; z-index:7; margin: 0px; padding:0px; margin-top:0px; border:1px solid blue; }

content-wrap{

margin-top:10%; border:1px solid green; width:100%; height:auto; }

Also, a second issue I’m having is trying to setup the pages to slide in from the right and slide out to the left. Everything I found so far in matter of CSS transitions and JQuery where giving me “toggle” solutions, which mean to slid in and oout from and to the same side.

I’m looking for any type of solution to these issues – both CSS and JQuery.

The site can be viewed at wixwebsite.seobrasov.com

Thank you all!

[Paulie_D]

Perhaps you could split this up into separate issues..one per thread.

[Author]

Posts