Archived

This topic is now archived and is closed to further replies.

  • 0

Apply LESS for stacked tabs

Question

Posted · Report post

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:

 

ul#menu-menu.menu {
.nav;
.nav-tabs;
.nav-stacked;
}

 

But that does not give the desired result.

 

When I lookup the LESS documentation from Pagelines I see a lot more:

 

  94  // STACKED NAV
  95  // -----------
  96  
  97  // Stacked tabs and pills
  98  .nav-stacked > li {
  99    float: none;
 100  }
 101  .nav-stacked > li > a {
 102    margin-right: 0; // no need for the gap between nav items
 103  }
 104  
 105  // Tabs
 106  .nav-tabs.nav-stacked {
 107    border-bottom: 0;
 108  }
 109  .nav-tabs.nav-stacked > li > a {
 110    border: 1px solid #ddd;
 111    .border-radius(0);
 112  }
 113  .nav-tabs.nav-stacked > li:first-child > a {
 114    .border-radius(4px 4px 0 0);
 115  }
 116  .nav-tabs.nav-stacked > li:last-child > a {
 117    .border-radius(0 0 4px 4px);
 118  }
 119  .nav-tabs.nav-stacked > li > a:hover {
 120    text-decoration:none;
 121    border-color: #ddd;
 122    z-index: 2;
 123  }

 

How do I apply this to my custom menu widget?

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Is the topic resolved ?

Share this post


Link to post
Share on other sites

Posted · Report post

Just look at the results :-) > http://oudisnieuw.net.websrv.makeweb[dot]nl

 

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?

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

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.

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

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).

 

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://lesscss.org/

 

2. Not sure what you're referring to when you say add a border to a an element in the top navigation.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

HI,

 

The code you have used isn't valid CSS:



ul#menu-menu.menu {
.nav;
.nav-tabs;
.nav-stacked;
}

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

<li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-210"><a href="http://oudisnieuw.net.websrv.makeweb.nl/dressoirs/">Dressoirs</a></li>

 

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?

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

I think you should use normal CSS for the effect.

Share this post


Link to post
Share on other sites

Posted · Report post

Willem,

 

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:

.menu-right {border-right: 1px solid black;}

This makes sure the last menu item is bordered on all four sides.

Share this post


Link to post
Share on other sites