Border Menu

Hi, right now in the main menu i have an advice for sellers ("Sei un rivenditore richiedi il catalogo"). I needed to add a menu item "Prodotti" as u can see here http://postimg.org/image/k62a5i9fb/.
I would like to show the advice floated right and the menu item floated left near to the site logo. Also i would like to give a rounded border style. This is what i would like to achieve: http://postimg.org/image/awxig1z79/.
I tried but without any good output

you can check it to www.brillabijou.com

Hi,

You have to use absolute positioning, try with this custom css code:

Code: Select all

.gk-menu-wrap {
   position: static;
}

#main-menu > li:first-child {
   position: absolute;
   left: 200px;
   border: 2px solid #fff;
   border-radius: 20px;
   height: 30px;
   line-height: 30px;
   margin-top: 13px;
}

#main-menu > li:first-child > a {
   height: 30px;
   line-height: 30px;
}


Hi thanks the code works. just last question before close ticket, if i would like to add another menu item and put same style, i need to duplicate code replacing first-child with second-child?
thanks for ur patience really.

To point the second menu item, use this code:

Code: Select all

#main-menu > li:nth-child(2)


and you'll have to use another value of the left property.

ok thanks!