Hi!
I am trying to make this type of menu for a client: https://www.tesla.com/modelx
Where there’s a side menu in addition to the top menu where you can click to scroll to various parts of the page. But I can’t stop the bar from going across the entire width of the screen. I tried starting from the starter:Fixed left but that one has width setting instead of heigth, where to I change this?
Page is here https://aewindsystems.com/2kw-seahawk/
I will put login info in secure note
Hey @annekling,
The credentials provided doesn’t work. Please check.
The Left Header isn’t the right way to achieve the left floating menu like Tesla’s website though. You should instead use the Top Header.
The bar should be positioned absolute and sticky.
The bar’s dimensions should be set as follows.
And, the key to make the bar short in terms of width is to add this Element CSS.
$el.x-bar {
width: 200px !important;
}
The following screenshot was taken from my test site where I tested the setup I’ve mentioned and you’ll see that the top bar and menu bar is sticky but the menu bar is short in terms of width. I believe you can imagine that the top bar should be the place for the logo and the menu background should be transparent.
Please try the setup and if you get stuck, don’t hesitate to follow up.
Thanks.
Hi!
Those setting helped, especially the custom css. Thank you very much!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.