Help Changing Navigation Buttons from Squares to Trapezoid - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 16, 2015 at 5:45 pm #193457

KellyZ
Participant

I am creating a webpage on weebly from one of their templates. I do however want to change one thing. I need the navigation buttons at the top that are square to actually be a trapezoid shape to match the logo. I have no clue where in the .css code this modification would be. I would really appreciate some help on this, I even tried to find someone to pay to help modify it with out any luck. :\

Example of site is here.

http://www.sacautoparts.com

http://hc.weebly.com/attachments/token/jF7oQ2XyBojf7FuHCmGam28aV/?name=Navigation+Menu.jpg

Thank you for any help to point me in the right direction! :)

Have a great weekend!

Kelly Z.

January 16, 2015 at 6:14 pm #193458

Shikkediel
Participant

You could add transform: skew(-20deg) to the container. It would need some extra coding if you don’t want the text to skew along with it.

Edited – with a smarter approach. Don’t forget a -webkit- rule…

January 16, 2015 at 6:35 pm #193460

KellyZ
Participant

Sweet thank you for the start! I copy and pasted that in to the .CSS and made my whole site at 170 degrees bwahaha. Now I will see if I can learn how add that to the template. (I’m not sure if I can solicit work on here or if I will get booted but I would be willing to pay someone to help me with this. :D)

Just so anyone that gives me help understands my coding level. :) I am a computer tech that used to do webpage design about 10 years ago, not a coder. I have a client who wants some webpages built. I thought, ok cool, I’ll just use weebly since that’s simple enough, but noo… now they want customizations… :P Well I’m actually really enjoying trying to figure things out but am so far out of touch with HTML and CSS coding that I signed up for all the free online classes I could find and am going for it! So far I have really enjoyed getting back into things. Anywhoo thank you for the help and advice and Shikkediel, thank you for the heads up on Transform. It looks like what I will need to use if I Could just figure out how to apply it now. :)

January 16, 2015 at 7:01 pm #193461
Shikkediel
Participant
Oh yeah, lol. The container class is used multiple times. I think you’d want to give the one that holds the menu a separate id :
```
#topmenu {
-webkit-transform: skew(-20deg);
transform: skew(-20deg)
}
```
```
<body class=" ... ">
 <div id="nav-wrap">
  <div id="topmenu" class="container">
   <ul class="wsite-menu-default">
```
CSS has progressed a lot in the past years. Many more options nowadays that make it very interesting. I’m sure you won’t need to hire anyone for this kind of ‘bumps’ in the road. The know-how and readiness to share on this forum (from what I’ve seen in the short period) and a google search (Stackoverflow often has good answers) can come a very long way.
January 16, 2015 at 8:53 pm #193463

KellyZ
Participant

Well I was not smart enough to figure how to edit it with out also affecting the font so I just made the font weight heavier and now I have italicized font on my navigation haha. The problem is this pre-made template has a lot of #nav-wrap containers that is beyond my skillz. But many thanks! Maybe i’ll keep fiddling around and get lucky.

January 16, 2015 at 10:18 pm #193464

Shikkediel
Participant

If you have FTP access you could directly change the HTML doc.
Looks pretty good when applied to #nav-wrap though.

You could skew the text back by the same amount but to target it, I think it would need to be wrapped in a <p> or <span> element.

January 16, 2015 at 10:26 pm #193465

KellyZ
Participant

Yeah I thought about that same thing. I was like, if I could just find how to apply negative transform on the font I would be golden! Whats throwing me off is normally I would try and add some inline css scripting but the entire navigation is pretty much built in those containers in the 1 css file so I have to get better at reading css now. :D You can see below where i added the Transform tag

<<code dump removed>>>

January 16, 2015 at 10:54 pm #193466

Shikkediel
Participant

There’s only one #nav-wrap so it should be fine like this. The ‘code dump’ isn’t necessary, all of it (and more) can be seen by visiting your page and using the element inspector (mods might remove it for readability). It looks doable though, seen worse. You didn’t add the webkit rule by the way which means it won’t work on iPhone…
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘CSS’ is closed to new topics and replies.