Menu icon Foundation

Designer | Anaheim, California, USA

My Posts



My Comments

Carolyn Lee commented on Carolyn Lee's post over 3 years

Valerie, here is what I did. My text in my accordions was sometimes quite long and since on my pages I can potentially have quite a few of them, I opted to restrain the text on the .accordion .accordion-navigation > a to one line only:

.accordion .accordion-navigation > a { 
  font-family: 'Droid Serif', serif; 
  color: #5e4631; 
  font-weight: bold;
  background: #edeae5;
  border: 1px solid #b1a89b;
  padding-left: 3.75rem;
  padding-right: 2.25rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

And then I went back to using absolute positioning for my icon:

.accordion-navigation > a:after {
    content: "\f055";
  font-family: FontAwesome;
    position: absolute;
  right: 1.75rem;
  z-index: 1;
}
.accordion-navigation.active > a:after {
    content: "\f056";
  font-family: FontAwesome;
}

That works just perfectly but only because no matter what screen size, my accordions are only ever 1 line. But it works great for me because then if on a small screen, you don't have to scroll and scroll so much, you can see what you want to click on and then the full info is under each item.

So not sure if that would work for what you're doing, but I finally got it to where I'm really happy with it.
Hopefully it works right across devices and browsers. :)

Carolyn Lee commented on Carolyn Lee's post over 3 years

Valerie, I thought I had fixed it but using the float doesn't totally work without problems. I eventually commented out that piece of code for my plus/minus sign. But I'm trying to make it work again. Let me know if you ever were able to get it to work. If I figure out something I'll post back also.

Carolyn Lee commented on Carolyn Lee's post over 3 years

Ah ok. Was adding it to the wrong thing. Thanks!

Carolyn Lee commented on Carolyn Lee's post over 3 years

Also one other question:
How do I make the active accordion list item to show the minus icon when it hasn't been clicked yet but it is expanded?
http://codepen.io/clizlee/pen/MaJZxe

Carolyn Lee commented on Carolyn Lee's post over 3 years

Ok. Yes I had the float before but I had a problem still centering the icon if for example the title was longer and pushed it to 2 lines. Also the text moves into the vertical space above the icon. http://codepen.io/clizlee/pen/MaJZxe

Carolyn Lee commented on Carolyn Lee's post over 3 years

Well that's interesting. It works on the forked pen. http://codepen.io/anon/pen/epZKrO
It just pushes the menu to the right. But on the pen you have to click on the link to get the menu. In my version you just hover and the menu appears. So maybe different version of foundation?

Carolyn Lee commented on Carolyn Lee's post over 3 years

The file I downloaded has 26 lines. I'm using an older version of Dreamweaver, CS4. Maybe that's why?

Carolyn Lee commented on Carolyn Lee's post almost 4 years

Thank you! I did just that, put the counter on the li and also added a > between .accordion li:before and also on the :after one so it would only style the child element below it and not every li and a element within it.

Carolyn Lee commented on Carolyn Lee's post almost 4 years

Ok yes I took out the position absolute and put in the display: block but it was still messing with the href element inside the content div. I realized it was counting it. So when I take out the counter completely then the href inside that div works just fine. I was trying to figure out a way to do a counter though so each li has a number. How would I exclude the href element inside that div from also being counted?

Carolyn Lee commented on Carolyn Lee's post almost 4 years

I was adding a number before the href so that each accordion li is numbered. But I'm open to suggestions. I was trying to position the number to center it vertically within the accordion li and also have an arrow :after.

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Carolyn Lee's post over 3 years

Valerie, here is what I did. My text in my accordions was sometimes quite long and since on my pages I can potentially have quite a few of them, I opted to restrain the text on the .accordion .accordion-navigation > a to one line only:

.accordion .accordion-navigation > a { 
  font-family: 'Droid Serif', serif; 
  color: #5e4631; 
  font-weight: bold;
  background: #edeae5;
  border: 1px solid #b1a89b;
  padding-left: 3.75rem;
  padding-right: 2.25rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

And then I went back to using absolute positioning for my icon:

.accordion-navigation > a:after {
    content: "\f055";
  font-family: FontAwesome;
    position: absolute;
  right: 1.75rem;
  z-index: 1;
}
.accordion-navigation.active > a:after {
    content: "\f056";
  font-family: FontAwesome;
}

That works just perfectly but only because no matter what screen size, my accordions are only ever 1 line. But it works great for me because then if on a small screen, you don't have to scroll and scroll so much, you can see what you want to click on and then the full info is under each item.

So not sure if that would work for what you're doing, but I finally got it to where I'm really happy with it.
Hopefully it works right across devices and browsers. :)

You commented on Carolyn Lee's post over 3 years

Valerie, I thought I had fixed it but using the float doesn't totally work without problems. I eventually commented out that piece of code for my plus/minus sign. But I'm trying to make it work again. Let me know if you ever were able to get it to work. If I figure out something I'll post back also.

You commented on Carolyn Lee's post over 3 years

Ah ok. Was adding it to the wrong thing. Thanks!

You commented on Carolyn Lee's post over 3 years

Also one other question:
How do I make the active accordion list item to show the minus icon when it hasn't been clicked yet but it is expanded?
http://codepen.io/clizlee/pen/MaJZxe

You commented on Carolyn Lee's post over 3 years

Ok. Yes I had the float before but I had a problem still centering the icon if for example the title was longer and pushed it to 2 lines. Also the text moves into the vertical space above the icon. http://codepen.io/clizlee/pen/MaJZxe

You commented on Carolyn Lee's post over 3 years

Well that's interesting. It works on the forked pen. http://codepen.io/anon/pen/epZKrO
It just pushes the menu to the right. But on the pen you have to click on the link to get the menu. In my version you just hover and the menu appears. So maybe different version of foundation?

You commented on Carolyn Lee's post over 3 years

The file I downloaded has 26 lines. I'm using an older version of Dreamweaver, CS4. Maybe that's why?

You commented on Carolyn Lee's post almost 4 years

Thank you! I did just that, put the counter on the li and also added a > between .accordion li:before and also on the :after one so it would only style the child element below it and not every li and a element within it.

You commented on Carolyn Lee's post almost 4 years

Ok yes I took out the position absolute and put in the display: block but it was still messing with the href element inside the content div. I realized it was counting it. So when I take out the counter completely then the href inside that div works just fine. I was trying to figure out a way to do a counter though so each li has a number. How would I exclude the href element inside that div from also being counted?

You commented on Carolyn Lee's post almost 4 years

I was adding a number before the href so that each accordion li is numbered. But I'm open to suggestions. I was trying to position the number to center it vertically within the accordion li and also have an arrow :after.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content