Nav to div Scroll

JavaScript
1

Hi I have Navigation that when clicked on goes to a
nav but I want the nav to align to the div like this:

1506Ă—390 86.1 KB

when clicked on and goes to the div. PAGE

it is currently doing this:

1594Ă—495 89.6 KB

2

Three comments:

  1. Do you use your web browser (Chrome or other webkit) maximized to the size of your monitor? If so, unmaximize it and maybe narrow it a little. You will see that the menu is absolutely positioned and slides under the content.

  2. I can see the menu in Chrome as described in comment #1, but it only appears as text in the upper left corner of the window in Firefox. Doesn’t look like FF sees any styles assigned to the menu.

  3. The HTML validator fails to complete a validation check. FATAL ERROR it says and points to a few items in the head of your page. I suggest that you take a look at this first.

3

Is their a way to prevent it from sliding under?

It should be fine now

1920Ă—907 187 KB

Do I need this? <meta charset="UTF-8"> It is whats giving me the fatal error…

4

Yes, you need it. The validator’s messages give a clue. It is not the presence of the charset meta tag that is the problem, it is it’s location.

Put the meta tags above the link tags. The charset meta tag should be the first or second meta tag on the page, within the first 512 bytes, per the validator.

Do this, and see if that helps. If it does, we can work on the other issues.

1 Like
5

yeah that helped

6

For my information only, why did the menu not display correctly in Firefox? Curiosity.

According to your screen shot, the menu will be positioned outside of the left edge of the normal page. That will effectively extend the width of the page and the page will look unbalanced. Are you sure you want to do this? If so, which box do you want it to sit beside?

7

It did it to mine too but then I refreshed it. who knows what it was

ok I will rethink the design again, ill get back to you on this if necessary thanks

8

Ok now I have within my wrapper not outside… I want the nav to
go side by side the div after the div is clicked like this:

1437Ă—389 81.2 KB

9

I assume that you want the menu to sit alongside a content box, even though you show it beside the top box with the slider.

It looks to me like #fixed-nav should be outside of #product_intro and inside of #productpages_wrap.
That should allow it to be positioned beside the content boxes.

Right now the top of the menu is still relative to the browser window.

Let’s give that a try, if you don’t mind.

10

Now it is in the #productpages_wrap. but it still does not go alongside the content box
when clicked on is because it is position:absolute?

11

Please delete {position:fixed;}

ul#main-menu {
    cursor: pointer;
    font-family: "Open Sans";
    font-weight: bold;
    list-style: outside none none;
    position: fixed;  /* DELETE Me */
}
12

ok I deleted it.

13

If I understand you goal, you now need to code the JavaScript associated with the content boxes and #fxd-nav to change the {top:} value for #fxd-nav to the same as the distance from the top of #productpages_wrap to the content box being clicked. This should be calculated on click and not assumed to be a fixed value.
I’m not a JavaScript person, so someone else will have to assist with that if you cannot do it yourself.

#fxd-nav {
    left: 995px;
    position: absolute;
    top: 210px;
}
16

I’d make a new post since the scope of the question has changed.

Edit - OP deleted his comments.

1 Like
17

ok

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.