Solved Helix Framework

Space within one item is too large - off canvas menu

Asked by Isabelle Dionisius 4 years ago Last activity 4 years ago

Hi community,

We are shortly before putting our new website online. I still have 2 issues/questions regarding the navigation bar:

Is there a possibility to move the drop down arrows to the right side inside the dropdown (for both menue and off canvas). Right now they start directly after the item. It looks a bit unstructured because the items are of different lengths and I would prefer to have them lined in a kind of column exactly underneath the arrow above in one vertical line.
I am experiencing an issue with the lilne spacing within items in the offcanvas menu. If one item consists of several lines they should be set more together. Right now there is the same space among items as well as some words that are within one item.

Thank you so much for help,
Isabelle

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

4 years ago

I had to be blind, add this line

.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {display: block;}

But It also worth to increase mobile menu width using above code, in may help in new Iphones.

4 more replies

Paul Frankowski Senior Staff

4 years ago · edited

Hi Isabelle,

I couldn't login to your admin. The user that you created for us "You do not have access to the Administrator section of this site."

ad 2) Yes, German words are very long ;)
But I think I there is a way.

Please use this custom CSS, refresh browser 2x and should be better a little bit, I guess you cannot use shorter pharses in menu items.

.offcanvas-menu {width: 320px;}
.offcanvas-menu .offcanvas-inner {
  padding-right: 25px;
  padding-left: 10px;
}

Use it instead of code that yu have in line 105 in custom.css

Paul Frankowski Senior Staff

4 years ago

and also this

@media (min-width: 339px) and (max-width: 359px) {
.offcanvas-menu {width: 340px;}
}

@media (min-width: 360px)   {
.offcanvas-menu {width: 360px;}
}

This will increase size of mobile menu and more words should fix in the line.

Isabelle Dionisius Asked this

4 years ago

Hi Paul,

that makes changes to the width of my offcanvas. However, it does not solve the problem. In the offcanvas under "Schulformen" there are items, some have subitems. For example the space between lines for items that belong together with subitems (thoose that have an arrow to access the subsubmenu) like "Berufsfachschule (HSA 10, FOR/Q) are just fine. For other items that belong together as well like "Aufbaubildungsgang Betriebswirtschaftslehre" the space is too large. It is as it would be 2 different items. But "Aufbaubildungsgang Betriebswirtschaftslehre" is just one item. In the desktop view, that works fine.

Thanks again for the time and comittment, the help is much appreciated.

Best
Isabelle

Isabelle Dionisius Asked this

4 years ago · edited

Fantastic, Paul,

That works and it looks fine now.

Again, thank you so much. Last question regarding this tem: The arrows are now greatly aligned on the right side within offcanvas menu. Is there a way to right align all arrows in the menu (deskptop view?)

Best
Isabelle