Menu items behave the same

[bigbangthinking]

Hi

Hou can I make the portfolio filter and the main menu have the same look and feel. If I rollover, click and active, they should have the same behaviour. This would also be for an eventual menu in the footer.

Thanks

[Mohammad – SUPPORT]

Hi,
If you provide website url so i can check to make this change very soon .
Thanks 🙂
With Best Regards
Swift Ideas

[bigbangthinking]

http://www.bigbangthinking.com

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code.

nav#main-navigation .menu li.menu-item > a{background:#eee;padding:6px 12px;box-shadow:0 0 5px rgba(0, 0, 0, 0.1) inset;border-radius:4px 0px 0px 4px;}
nav#main-navigation .menu li.menu-item:first-child > a{border-radius:4px 0px 0px 4px;}
nav#main-navigation .menu li.menu-item:last-child > a{border-radius:4px 0px 0px 4px;}
nav#main-navigation .menu > li > a span.nav-line{background-color:#eee !important;height:0px !important;max-height:0px}
nav#main-navigation .menu li.menu-item > a:hover{background:#7F7F7F !important;color:#fff !important}

Thanks 🙂
With Best Regards
Swift Ideas

[bigbangthinking]

Thanks Mohamad

But actually it was the other way round. On the portfolio I want to get the selected item not to have the grey faded backgroung it has.

🙂

[Mohammad – SUPPORT]

Hi,
Which color faded background do you want for portfolio ?
Thanks 🙂
With Best Regards
Swift Ideas

[bigbangthinking]

Hi Mohammad

Firts thank you for your help. I used your code nd change it a little bit and obtained what I wanted on the main menu.

nav#main-navigation .menu li.menu-item > a{background:#fff;padding:4px 6px;box-shadow:0 0 0px rgba(0, 0, 0, 0) inset;border-radius:4px 4px 4px 4px;}
nav#main-navigation .menu li.menu-item:first-child > a{border-radius:4px 4px 4px 4px;}
nav#main-navigation .menu li.menu-item:last-child > a{border-radius:4px 4px 4px 4px;}
nav#main-navigation .menu > li > a span.nav-line{background-color:#fff !important;height:0px !important;max-height:0px}
nav#main-navigation .menu li.menu-item > a:hover{background:#7F7F7F !important;color:#f1f1f1!important}

/* fondo blanco en search */

#undefined-sticky-wrapper > div > div > div.header-right > nav.search-nav.std-menu > ul > li > a{background:#fff;padding:4px 6px;box-shadow:0 0 0px rgba(0, 0, 0, 0) inset;border-radius:4px 4px 4px 4px;} 
#undefined-sticky-wrapper > div > div > div.header-right > nav.search-nav.std-menu > ul > li >  a:hover{background:#7F7F7F !important;color:#f1f1f1!important}

This works great, but the active page is with the same color.

http://www.bigbangthibkibg.com

And I would like the same in the portfolio menu.

Thanks

[bigbangthinking]

Ho!

And would like some more space to the left of the search icon, in between the search and the menu item.

🙂

[Mohammad – SUPPORT]

Hi,
Please attach one marked screenshot.

Thanks 🙂
With Best Regards
Swift Ideas

[bigbangthinking]

Hi

The idea is that:

!.- Home is the active page and should have a grey background.
2.- the space inbeetween should be larger
3.- the complete style and behaviour should be the same as the main menu (the code I used was published before).

http://www.bigbangthibkibg.com

Thanks
G

[Melanie – SUPPORT]

Hi, your link is not working 🙁
Can you check back please?

[bigbangthinking]

bigbangthinking

🙂

[Melanie – SUPPORT]

Got it, checking now!

[Melanie – SUPPORT]

Hi,

1

.current_page_item a {
background: grey!important;
}

2 it looks like you modified the navigation quite a bit so it doesn’t respect the css for spacing anymore, maybe you want to revise your css?

3

ul.portfolio-filter-tabs li.selected a, ul.portfolio-filter-tabs li a {
border-radius: 4px 4px 4px 4px;
}

[bigbangthinking]

Melanie

Thanks that helped allot

1.- That did the job 🙂

2.- decided to leave the search with out background

3.- Changed your code for # 3 a little so that it has rounded corners and now it works fine.

ul.portfolio-filter-tabs li.selected a {
	-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	box-shadow: inset 0 0 5px rgba(0,0,0,0);
	font-weight: normal;
	background-color: #E0E0E0;
	border-radius: 4px 4px 4px 4px;}

How can I apply the rounded corners to the overstate of the filter. As you can see they are straight angles at the moment.

I would oalso like to dissapear the alt text via css

Thanks