Jump to content
Sign in to follow this  
stefanoferruggiara

CUSTOMIZE NAV MENU

Recommended Posts

stefanoferruggiara

Hi there, i would like to customize my menu nav in Pagelines Framework like that: Background: #171717 Text: #FFFFFF Text Link: ##F37E2A Border: None or #171717 Arrow (that indicated sub menu): #FFFFFF or #BCBCBC Effect over Link: #AAAAAA PS: I see MENU ALWAYS ON TOP that have many personalization but don't other thing that i would like, like: arrow, sub-submenu. Then i prefer to customize the standard navmenu.


"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jackey
That is possible through customizing the CSS of the standard menu. Do you mean like this: [url]http://golfclub-stippelberg.nl[/url] The selectors you need to add in this order: #menu-main .menu-item { *custom code* } #menu-main .menu-item a { *custom code* } #menu-main .menu-item a:hover { *custom code* } #menu-main .menu-item a:active { *custom code* } #menu-main .menu-item a:focus { *custom code* } Enable the arrows and drop down in the PageLines Header section.

Share this post


Link to post
Share on other sites
stefanoferruggiara
custom code is the color? The code is like this? #menu-main .menu-item {#171717} Like this? is correct?

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
Sorry.. any example for dummies;) ?

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jackey
An example: The background of the menu: The Link text: [code]#menu-main .menu-item a { color: #336633 !important; background: #DDD; }[/code] The hover color: [code]#menu-main .menu-item a:hover { color: #C03010 !important; background: #D4D4D4; }[/code] The active color: [code]#menu-main .menu-item a:active { color: #FF5522 !important; background: #FFF; }[/code] The focus color: [code]#menu-main .menu-item a:focus { color: #DE4321 !important; }[/code]

Share this post


Link to post
Share on other sites
stefanoferruggiara
Perfect!!! THANKS

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
and for move all the nav menu up of some pixel?

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jackey
That depends... It could be that it's container is pushed down by the logo, but to determine that I need a link to the page...

Share this post


Link to post
Share on other sites
agrega
I want to insert a backgroud image, is posible to do this?

Share this post


Link to post
Share on other sites
Jackey
Sure... you can do virtually anything... the key is for you to select the proper objects [code]#menu-main .menu-item a {...[/code] in the right sequence. [code]#menu-main .menu-item a {... #menu-main .menu-item a:hover {... #menu-main .menu-item a:active {... #menu-main .menu-item a:focus {...[/code] One could even do this: [code]#menu-main .menu-item a { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; color: #363 !important; background: #DDD; background: -moz-linear-gradient( white, #DDD ); background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(#DDD) ); background: -webkit-linear-gradient( white, #DDD ); background: -o-linear-gradient( white, #DDD ); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }[/code] Be creative... don't hold back! /* and comment your code */ But you better check out [url="http://www.w3schools.com/css/"]this site[/url] for CSS info first.

Share this post


Link to post
Share on other sites
stefanoferruggiara
I just insert your code and... sorry but.. nothing work! Nothing happen.. :-O

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jackey
To deterine the exact code, I really need a link to the menu you want to customize.

Share this post


Link to post
Share on other sites
stefanoferruggiara
http://www.coaching-formazione.info

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
Now i have also the problem that some link have different background .. ufff!!

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jackey
I've been looking at the site, but you are using menu-always-on-top for the main menu. I'm sorry but the examples I gave where given with the standard menu in mind. I have no experience with this plugin...

Share this post


Link to post
Share on other sites
stefanoferruggiara
No Jakey... i use menu-always--- standard menu have some problem to fix.. i can set it .. i have client that visit the site...

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
I just insert the custom code but nothing happen... someone can help me?

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
NO ONE CSS CODE WORK!!! Someone can help me???

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
#menu-main .menu-item a:active { color: #FF5522 !important; background: #336699; }

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
or this: #menu-main .menu-item a { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; color: #363 !important; background: #DDD; background: -moz-linear-gradient( white, #DDD ); background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(#DDD) ); background: -webkit-linear-gradient( white, #DDD ); background: -o-linear-gradient( white, #DDD ); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
or this #menu-main .menu-item a { color: #336633 !important; background: #DDD; }

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
stefanoferruggiara
now this.. for test... #menu-main .menu-item a { color: #336699 !important; background: #171717; }

"Se c'è una sola possibilità.. lo faccio, se non c'è.. la creo!"

Coach Stefano Ferruggiara, Allenatore Fisico & Mentale

Share this post


Link to post
Share on other sites
Jenny
What exactly are you trying to change?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Jenny
Add !important after background also, like: background: #171717 !important;

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×