Space Within One Item is Too Large - Off Canvas Menu - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Space Within One Item is Too Large - Off Canvas Menu

ID

Isabelle Dionisius

Helix Framework 3 years ago

Hi community,

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

  1. 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.

  2. 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

0
5 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #54269

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #54211

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #54212

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.

0
ID
Isabelle Dionisius
Accepted Answer
3 years ago #54238

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

0
ID
Isabelle Dionisius
Accepted Answer
3 years ago #54273

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

0