Apply LESS for stacked tabs
Posted 21 March 2013 - 12:22 PM
Hi, I have used a custom menu widget in my left sidebar.
I would like to apply the 'stacked tabs' from Twitter Bootstrapp.
What I did in my CSS file was:
But that does not give the desired result.
When I lookup the LESS documentation from Pagelines I see a lot more:
How do I apply this to my custom menu widget?
Posted 21 March 2013 - 01:29 PM
The code you have used isn't valid CSS:
As far as I know, you wont be able to apply this CSS to a custom menu widget. I recommend you attempt to do this via a text widget and use custom HTML and see if this works.
Posted 21 March 2013 - 02:04 PM
Yeah, but that's the whole point, I want to make use of the WordPress menu ofcourse :-).
I thought it was possible because Pagelines integrated Bootstrap.
But If it's not possible, I just use normal CSS to have the same effect.
Posted 23 March 2013 - 04:17 PM
Just look at the results :-) >
The left part is finished... question about the topmenu though. When I put a border around the a element is is twice as thick what you see in the sidebar.
How is that possible?
Posted 24 March 2013 - 09:07 AM
Not sure what you mean, as there is already a border around that menu widget.
Unfortunately, we are unable to provide support for user created CSS. I recommend you contact one of our Pros is you require further assistance.
Posted 24 March 2013 - 09:51 AM
Sorry, I don't understand why you send me to a Pro, but for sure you misunderstood me because the left menu is ready, I try to apply the same border at my top menu.
So my previous post explained:
1) Showing the endresult of my left menu, I'm proud at it, because you guys told me to use normal CSS because how I tried to apply LESS was not correct.
2) Just a simple CSS question. When I do a border around the 'a element' in the top navigation the border (1px) is twice as thick as you can see in the sidebar right now (you can test it yourself by adding a border within Google).
Posted 24 March 2013 - 11:04 AM
Willem, I pointed you to our pros, as we are unable to provide support to user created custom code, which is basically what this is.
1. The code you used above is not LESS CSS, you add classes inside a CSS class, that is not LESS CSS. For information on LESS, I recommend you visit the official site.
2. Not sure what you're referring to when you say add a border to a an element in the top navigation.
Posted 25 March 2013 - 05:08 PM
Hi, if you say I have to go to a PRO, I rest my case.
But not in this situation, because we don't understand each other, perhaps a language barier because of my English.
I first wanted to apply LESS to my left menu in my sidebar, your collegue told me: not possible > I used normal CSS > proud on the result > that's the only thing I said for that.
Second, there is a problem with the top navigation. Nothing to do with less. I just apply a border (border: 1px solid black) to the a element.
Nothing difficult, nothing special BUT the border is not 1px > it thicker. I use borders everywhere (also for the sidebarwidgets and menu), all 1px, top nav: thicker.
Why is that?
Posted 25 March 2013 - 08:48 PM
It's possible that the way you're applying a border to the navbar is doubling it because each menu item causes duplication.
Here's what happens... If you apply border: 1px solid black; the menu item shows a single pixel on top and bottom, and the left menu item has a single pixel width on the left side. Between each menu item, there's a border on the left and right. These each meet the next menu item, causing the doubling. Each really has only on one single pixel border, but it appears visually as two pixels.
How to fix it? Simple. Change the border CSS to this:
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black.
But, on the last menu item, you'll need to go to Dashboard > Appearance > Menus. Click "Screen Options" at the top and check the box for CSS Classes. Edit the last menu item and add a unique class. Let's call it menu-right.
Add this to the custom code:
This makes sure the last menu item is bordered on all four sides.
Posted 15 April 2013 - 12:24 PM
Thanks for the explenation, I already understand what you are telling. I had this problem before and I managed to solve it with margin-bottom: -1px (in sidebar menu).
In my case i use a padding so the borders are not next to each other.
However, when i apply a border to the a element today, it does show me a normal 1px border. Miracles happen ;-).
Thanks for the effort.