Vertical Text for Menu tab

mgargiullo
(@mgargiullo)

10 years, 11 months ago

First… great theme. thanks.

I’m assisting my mother publish an updated version of a field guide. I created a child theme and pulled elements of the style sheet in for additional customization. One of her wishes is that the Menu tab on the left side be text. I pulled the style toggle-nav::before over to the child theme and replaced content with the text. This works well and displays the text, however, I’d really love to be able to display the text vertically. Any ideas how to accomplish this?

Viewing 1 replies (of 1 total)

Thread Starter

mgargiullo

(@mgargiullo)

10 years, 11 months ago

Ok… think I’m on the right track. Spacing is a little off, but working on it.

Full style:

#toggle-nav::before {
    background: #252525 none repeat scroll 0% 0%;
    color: #FFF;
    content: "TOC";
    display: block;
    padding: 7.425px;
    position: fixed;
    top: 50%;
    transition: all 0.5s ease-in-out 0s;
    left: 0px;

-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Viewing 1 replies (of 1 total)

The topic ‘Vertical Text for Menu tab’ is closed to new replies.

Tags