Problem concerning TopBar

Classic Stacks
1

For personal reasons i changed from RWML to Agent for the double language option of my website www.cafra-arabians.com.
So far it works fine.
But since then i have an issue with my top bar.
I have a line over and under the top bar.
The top bar is fixed.
When scrolling, the lines over and under disappear.
With RWML it worked fine.
Now the line under the top bar is shorter, it ends outside the top bar dropzone.
And when scrolling a big black bar appears directly under the top bar.
Checked it with Firefox and Safari. Both the same.

Any suggestions please?
RW 7.4, Foundation and all other stacks actual version.

Thanks a lot in advance! Barbara

2

You have Foundation divider stacks above and below the TopBar inside your structure stack. That is exactly what is appearing on the published page.

TopBar is fixed but the divider lines are not and so they scroll away with the rest of the content.

If you want the dividers to be fixed along with TopBar then you are going to have to use a different stack to fix all three items together. Pin will do this but remember to set TopBar to Static when you are fixing with Pin instread.

1 Like
3

Thank you, but this is not the issue.
I don’t want the dividers to be fix. This point is fine.
I want the divider UNDER the TopBar to have the complete lenght as the divider above.
And i don’t want the big black bar under the top bar when scrolling.

1.jpg2214Ă—466 96.9 KB

2.jpg2214Ă—460 114 KB

Thank you!

4

In any of your settings, is there an “overflow” option (to be hidden or visible)? If I check that in the web inspector, then the line goes all the way across. I recall seeing that in many of Big White Duck’s stacks, but can’t recall if it is in Foundation or not…

cafra.jpg1839Ă—763 192 KB

5

Jason beat me to it while I was typing. The Foundation divider applies an overflow hidden which in this case is messing things up.

The CSS will only affect dividers inside your structure stack so won’t mess with any others on your site. Just add it to the site wide CSS

.com_joeworkman_stacks_foundation_structure_stack .com_joeworkman_stacks_foundation_divider_s3_stack{
    overflow: visible!important;
}
6

But why did it work with RWML and doesn’t when using Agent instead?

With RWML it looked like that:

3.jpeg2216Ă—449 211 KB

4.jpeg2219Ă—534 323 KB

7

It is impossible to say without seeing the old page but it would seem that RWML was applying some styles that prevented the problem happening. Most likely a clear fix for the images of the flags.

8

OK - that got me thinking. You must have changed the way the flags are displayed.
They are now done with paragraph stacks which default to having a bottom margin.

Turn off the bottom margin in the paragraph stacks for the flags and it will no longer push the divider to the left.

You can then dispense with that CSS

4 Likes
9

@tav
THATS IT!!!

Thank you sooo much!
RWML is using “styled text”, but when changing to Agent, i used a paragraph stack from foundation.
Now the flags are in a standard text stack and it works!!!

Super, thank you again!

1 Like