Change color of one menu item ?

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Markoc
 
 
Posts: 82
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc » Mon Nov 12, 2018 1:19 am

Wow, this is fantastic and what I was looking for. I’m guessing that I will have to redo this each time I do any updates on this website in wysiwyg?

Thank you

User avatar
crispy68
 
 
Posts: 1110
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Change color of one menu item ?

Post by crispy68 » Mon Nov 12, 2018 1:55 am

Unfortunately, yes you will only have to add the class code to the menu code each time you change the page and republish.

User avatar
Fender
 
 
Posts: 155
Joined: Sun Oct 16, 2011 11:01 am

Re: Change color of one menu item ?

Post by Fender » Fri Nov 16, 2018 12:13 pm

I found an easier way to make this happen.

Click on Page --> Page HTML --> Between <head></head> tags and enter the following:
<style>
#wb_masterfluidCssMenu1 li:nth-child(6n+2) {
background: #FF0000;}
</style>
the number after nth-child(6n+ is the order of the links in the menubar.
No need to change something in the html after publishing.
works in any menu.
The only downside of this is if you have a 2 submenus on your menubar you also see a red button behind your submenu.
I have to figure out how to solve this.
if possible.

Fender

smile
 
 
Posts: 23
Joined: Tue Oct 13, 2020 8:22 pm

Re: Change color of one menu item ?

Post by smile » Wed Oct 14, 2020 10:06 pm

Does this code needs to be added to masterpag with menu?
I tried but this does not seem to work.

How does one make 1st, 2nd 3rd etc. items change color ? the nth-child is very complicated stuff.

User avatar
Fender
 
 
Posts: 155
Joined: Sun Oct 16, 2011 11:01 am

Re: Change color of one menu item ?

Post by Fender » Thu Oct 15, 2020 2:49 pm

How does one make 1st, 2nd 3rd etc. items change color ? the nth-child is very complicated stuff.
this menu has 8 menu items so the nth-child are from 1 to 8 depending wich number your menu item is on the row.
I made you a fiddle with the css menu
https://jsfiddle.net/f7tm9ark/
You can use this on a masterpage but be sure to insert the css , defined as a style ( <style>
</style> ) in the page html
between the head tags !
When you use https://webmaker.app/app/ you can play with your menu and also export it to your
harddrive so you can always go back to your project.
What I did; I only make a menu in WYSIWYG on a page, nothing else.
Open the page Html
copy the page html to the webmaker app.
Make a preview of your menu
on the preview rightclick select inspect element and choose the style editor on top of your browser
copy the css of your page to the webmaker app
In the css you add the addinial css for the background of the menu items.
Be sure to save and export your project in the app so you can use it again to play with the menu.

Code: Select all

  /* with this you you can change each menu items background 
  The only downside of this is if you have sub items with the same number they also get that background color! */

}

#wb_CssMenu1 li:nth-child(4) {
  background: #ad49d8;
}

#wb_CssMenu1 li:nth-child(5) {
  background: #00334f;
}

#wb_CssMenu1 li:nth-child(8) {
  background: #FF0000;
}

#wb_CssMenu1 li:nth-child(3) {
  background: #FF0000;
}

/* with this you you can only change the first menu item background */
#wb_CssMenu1#wb_CssMenu1 li.firstmain {
  color: #FFFFFF;
  background: #4a7adb;

  /* with this you have to change the class in html after publish each time you make changes to your pages which uses the menu! here it's made on the second menu item */
}

#wb_CssMenu1 ul li .solidButtonnav-link {
  background-color: green;
}
Have fun
Fender

Post Reply