(SOLVED) How To: Fixed Vertical Menu?

volvoxturbo · 2017-11-08 23:54:28

Hi all,

I will use a fixed vertical menu on the left side.
I tried with:

.page__pallet[data-position="T1"] {z-index: 2; position: fixed;}

that works but "the__copy" on the right side now overlaps the menu :-/

how to prefent this???

thx in advance.

Best regards,
Oliver

Last edited by volvoxturbo (2017-11-10 01:13:11)

rod barbee · 2017-11-09 00:43:51

no need for custom css for a fixed vertical menu. Just set it up in the page template > Navigation > Horizontal Navigation: Location: Disabled
then scroll down to Vertical Navigation and choose the location as either Pallet 1 or Pallet 2

volvoxturbo · 2017-11-09 01:11:03

Hi Rod,

thank you for your fast reply.
That was what I did.

Again:
I have a pallet with a vertical menu on the left side and in the main column a gallery.
If I scroll down the gallery, the menu should not scroll.

;-)

rod barbee · 2017-11-09 01:11:50

link?

volvoxturbo · 2017-11-09 01:15:37

sorry, www.oliver-blum.com

rod barbee · 2017-11-09 01:25:31

I don't see the menu moving at all. Viewing in Firefox and Chrome

volvoxturbo · 2017-11-09 01:27:17

but the content on the right side is overlapping the pallet :-(

rod barbee · 2017-11-09 01:29:29

I'm not seeing it. It all looks pretty good to me. Do you have a specific page this is happening on? A screen shot showing the problem?

rod barbee · 2017-11-09 01:30:42

never mind, I just hovered over the menu and saw the problem. Maybe try reducing the pallet width?

If I expand the browser window enough (over two monitors), the problem goes away.

volvoxturbo · 2017-11-09 02:06:57

why is it overlapping and what is the trick that it doesn't. Nether on small nor on large browser windows.

Best regards,
Oliver

rod barbee · 2017-11-09 02:25:39

I don't know. Matt will need to take a look.

volvoxturbo · 2017-11-09 02:27:11

So thank you again Rod for your help :-)

I tried it with decreasing the pallets width, but the problem is: if the main content overlapse the left pallet, the content is not centered :-/

Best regards,
Oliver

Last edited by volvoxturbo (2017-11-09 02:30:20)

rod barbee · 2017-11-09 02:35:10

have you tried decreasing the Gallery Max-Width in the album template's Thumbnail Grid section?

volvoxturbo · 2017-11-09 02:39:55

Even if the templates content area is 920px it's always larger and overlaps the pallet with this css active:

.page__pallet[data-position="T1"] {
z-index: 2;
position: fixed;
}

Last edited by volvoxturbo (2017-11-09 03:09:37)

volvoxturbo · 2017-11-09 02:56:48

I now disabled:

.page__pallet[data-position="T1"] {
z-index: 2;
position: fixed;
}

what else can I do to have everything in order but with a menu which will not scroll if youre scrolling the page (fixed menu)???

Best regards,
Oliver

rod barbee · 2017-11-09 03:28:01

I'm not an expert on the position property, but I think that when you set position:fixed; that you're positioning relative to the browser window and taking the element out of the normal document flow. This is probably why the rest of the page content is moving over. It's filling the space vacated by the menu.
You probably need to set some positioning for the page content too.
This seems to do something:

.main__column > .content {
      left: 120px;

You'll probably need to put that in a media query so it doesn't mess things up on smaller devices.

volvoxturbo · 2017-11-09 03:41:42

thank you Rod,
tried it but it only worked for one size and is not flexible :-/
...

rod barbee · 2017-11-09 03:51:35

yeah, you'd probably have to put it in multiple media queries and tailor it to several widths.

volvoxturbo · 2017-11-09 05:35:17

thanks Rod :-)

Is there maybe a smarter solution???

rod barbee · 2017-11-09 05:44:58

probably. I'm just not that smart

Matthew · 2017-11-09 14:28:06

Oliver, the problem is your custom styling. Disable the stylesheet at /backlight/custom/css/homepage.css and the problem goes away.

volvoxturbo · 2017-11-09 20:19:42

Hi Matt,

OK, I did a reset of the homepage.css.
Now the question again: how to fix / nail the vertical menum, that it will NOT scroll?

Best regards,
Oliver

volvoxturbo · 2017-11-10 00:14:22

Hi all,

got it to work with:

.page__pallet {
position:fixed;
left:0;
width:200px;
height:100%;
}

main {
padding-left:200px;
}

Thanks Rod & Matt for your help :-)

Best regards,
Oliver

Community @ The Turning Gate

#1 2017-11-08 23:54:28

(SOLVED) How To: Fixed Vertical Menu?

#2 2017-11-09 00:43:51

Re: (SOLVED) How To: Fixed Vertical Menu?

#3 2017-11-09 01:11:03

Re: (SOLVED) How To: Fixed Vertical Menu?

#4 2017-11-09 01:11:50

Re: (SOLVED) How To: Fixed Vertical Menu?

#5 2017-11-09 01:15:37

Re: (SOLVED) How To: Fixed Vertical Menu?

#6 2017-11-09 01:25:31

Re: (SOLVED) How To: Fixed Vertical Menu?

#7 2017-11-09 01:27:17

Re: (SOLVED) How To: Fixed Vertical Menu?

#8 2017-11-09 01:29:29

Re: (SOLVED) How To: Fixed Vertical Menu?

#9 2017-11-09 01:30:42

Re: (SOLVED) How To: Fixed Vertical Menu?

#10 2017-11-09 02:06:57

Re: (SOLVED) How To: Fixed Vertical Menu?

#11 2017-11-09 02:25:39

Re: (SOLVED) How To: Fixed Vertical Menu?

#12 2017-11-09 02:27:11

Re: (SOLVED) How To: Fixed Vertical Menu?

#13 2017-11-09 02:35:10

Re: (SOLVED) How To: Fixed Vertical Menu?

#14 2017-11-09 02:39:55

Re: (SOLVED) How To: Fixed Vertical Menu?

#15 2017-11-09 02:56:48

Re: (SOLVED) How To: Fixed Vertical Menu?

#16 2017-11-09 03:28:01

Re: (SOLVED) How To: Fixed Vertical Menu?

#17 2017-11-09 03:41:42

Re: (SOLVED) How To: Fixed Vertical Menu?

#18 2017-11-09 03:51:35

Re: (SOLVED) How To: Fixed Vertical Menu?

#19 2017-11-09 05:35:17

Re: (SOLVED) How To: Fixed Vertical Menu?

#20 2017-11-09 05:44:58

Re: (SOLVED) How To: Fixed Vertical Menu?

#21 2017-11-09 14:28:06

Re: (SOLVED) How To: Fixed Vertical Menu?

#22 2017-11-09 20:19:42

Re: (SOLVED) How To: Fixed Vertical Menu?

#23 2017-11-10 00:14:22

Re: (SOLVED) How To: Fixed Vertical Menu?

Board footer