Title: diagonal navigation
Last modified: August 21, 2016

---

# diagonal navigation

 *  Resolved [Jeff F.](https://wordpress.org/support/users/jefferytodd/)
 * (@jefferytodd)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/)
 * I’ve had a big challenge with making a horizontal nav on an diagonal angle up.
   I’ve accomplished it but I”m not getting the images to shrink with the rest of
   the responsive design. When I’ve tried to put max-width or a % for their divs
   they go bye-bye. 🙂
 * Anyone have experience I”m missing trying?
 * [http://luis.amusingz.com](http://luis.amusingz.com)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Sleneau](https://wordpress.org/support/users/sleneau/)
 * (@sleneau)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068092)
 * I would use a google web font–perhaps [classic comic](http://www.fonts.com/font/canada-type/classic-comic?QueryFontType=Web&src=GoogleWebFonts),
   [Comic sans](http://www.fonts.com/font/microsoft-corporation/comic-sans?QueryFontType=Web&src=GoogleWebFonts),
   or [comic strip](http://www.fonts.com/font/monotype/comic-strip?QueryFontType=Web&src=GoogleWebFonts)
   to style my links.
 * Then, I would use the [css transform property](http://css-tricks.com/snippets/css/text-rotation/)
   to rotate the text to where I wanted it to be. This would allow me to make the
   font size either a percentage, ems, or rems–something that is relative to the
   size of the parent container. It would also allow me to easily change the position
   of the text by altering a single property–margin-top–as well as add all sorts
   of nifty CSS animations on the hover state.
 * It’s worth playing around with, and if you don’t really like any of the google
   web fonts, then it’s possible to upload your own and use them on the site. But
   make sure to check their licenses before you do such a thing.
 *  [Sleneau](https://wordpress.org/support/users/sleneau/)
 * (@sleneau)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068101)
 * An example of something that would accomplish what I’m talking about follows,
   and you could likely just make :hover and :visited variations off of it. Problem
   is, you’d have to make :nth-child declarations for each menu item, since they
   would all be at different heights, and thus need different margin-top.
 *     ```
       -webkit-transform: rotate(-16deg);
       font-size: 2.1em;
       color: #F5FF00;
       font-weight: 900;
       float: left;
       display: block;
       width: 100%;
       height: 2.4em;
       margin-top: 85%;
       margin-left: 10px;
       list-style: none;
       background-image: url('');
       background-repeat: no-repeat;
       text-indent: 0px;
       ```
   
 *  [Sleneau](https://wordpress.org/support/users/sleneau/)
 * (@sleneau)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068105)
 * The above code needs the following code to really display properly:
 *     ```
       .menu li {
       float: left;
       display: inline;
       text-decoration: none;
       width: 25%;
       }
       ```
   
 *  [Sleneau](https://wordpress.org/support/users/sleneau/)
 * (@sleneau)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068109)
 * and also this:
 *     ```
       #main {
       width: 100%;
       height: auto;
       margin: 15px auto;
       overflow: hidden;
       padding: 24px 0px 0px 0px;
       }
       ```
   
 *  Thread Starter [Jeff F.](https://wordpress.org/support/users/jefferytodd/)
 * (@jefferytodd)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068192)
 * [@sleneau](https://wordpress.org/support/users/sleneau/)
 * Thank you so much for your help. I was not familiar with this and I”m looking
   into your link for help on older browsers. I really appreciate your time.
 *  [Sleneau](https://wordpress.org/support/users/sleneau/)
 * (@sleneau)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068194)
 * Post results here if it works, glad to help
 *  Thread Starter [Jeff F.](https://wordpress.org/support/users/jefferytodd/)
 * (@jefferytodd)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068312)
 * I ended up having delays with the client but I’m still looking for an answer.
   I tried to use the idea from [@sleneau](https://wordpress.org/support/users/sleneau/)
   and a couple of other tutorials and unfortunately the font they wanted would 
   not show up with font face rule and they couldn’t deal with another substitute.
 * So in case another takes a peek, if you know any reason why the images won’t 
   shrink with the rest of the responsive design I would greatly appreciate it. 
   I know the next step is to use different sized images if they have to have this
   font, but I’m wondering for my growing knowledge why those images as links do
   not diminish as the others.
 * thanks
 * [http://luis.amusingz.com](http://luis.amusingz.com)

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘diagonal navigation’ is closed to new replies.

## Tags

 * [nav](https://wordpress.org/support/topic-tag/nav/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 2 participants
 * Last reply from: [Jeff F.](https://wordpress.org/support/users/jefferytodd/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/diagonal-navigation/#post-5068312)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics