11 replies to this topic

[0899]

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:

 

Please Login or Register to see this Hidden Content

 

But that does not give the desired result.

 

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

 

Please Login or Register to see this Hidden Content

 

How do I apply this to my custom menu widget?

 

Kind regards,

 

Willem

[Danny]

HI,

 

The code you have used isn't valid CSS:

Please Login or Register to see this Hidden Content

 

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.

[0899]

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.

[catrina]

I think you should use normal CSS for the effect.

[0899]

Just look at the results :-) > 

Please Login or Register to see this Hidden Content

 

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

[Danny]

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.

 

Please Login or Register to see this Hidden Content

[0899]

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

[Danny]

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.

 

Please Login or Register to see this Hidden Content

 

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

[0899]

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.

 

Please Login or Register to see this Hidden Content

 

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

[Rob]

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:

Please Login or Register to see this Hidden Content

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

[0899]

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.

[Danny]

Is the topic resolved ?