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
Post Reply
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Change color of one menu item ?

Post by Markoc »

Is there a way to highlight one menu item with a different color then the rest of the menu items?

I would like to have the background of one menu item red to emphasize it. See example:

Image

this is the website I have used it before but want to convert it to a wysiwyg site but need the same look to the menu.

www.ppocc.org

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Change color of one menu item ?

Post by Pablo »

Some menus have a 'use hover style to indicated the current page' option.
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

That would be different. I just want the background color of that one menu item to have a different color no matter what page it is on.

I am using the responsive menu.

Is there a way to do add it in css or a custom code in a html block?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Change color of one menu item ?

Post by Pablo »

I'm sorry there is no standard solution for this. This will require custom code.
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

Thanks!

Hoping someone else can chime in with an idea.
WWBman
 
 
Posts: 913
Joined: Fri Jan 08, 2010 6:10 pm

Re: Change color of one menu item ?

Post by WWBman »

Apologies for this but ... :)
You could cover the menu item with a shape with background red and whatever link you want and make the menu+shape a group so it will be easy to reposition if required.
Of course, you would have to take into account RWD if needed.
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

Thanks for the suggestion. Sort of a "last resort" option.
WWBman
 
 
Posts: 913
Joined: Fri Jan 08, 2010 6:10 pm

Re: Change color of one menu item ?

Post by WWBman »

Markoc wrote: Sat Nov 10, 2018 8:03 pm Thanks for the suggestion. Sort of a "last resort" option.
Yeah, sorry! :oops:
WWBman
 
 
Posts: 913
Joined: Fri Jan 08, 2010 6:10 pm

Re: Change color of one menu item ?

Post by WWBman »

Actually, I would just use a series of shapes next to each other.
Then you can easily make them variable length as in your example.
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

Perhaps, but I would still need a sub-menu.
WWBman
 
 
Posts: 913
Joined: Fri Jan 08, 2010 6:10 pm

Re: Change color of one menu item ?

Post by WWBman »

First 2 items shapes, others a menu?
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

worth a try. thanks
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Change color of one menu item ?

Post by crispy68 »

Are you willing to alter the published code by adding a simple class statement?
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

Yes I can do that
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Change color of one menu item ?

Post by crispy68 »

@markoc,

I don't know how fancy of a responsive menu you are using (icons, drop downs, etc) but the basic layout of the responsive menu is like such:

Code: Select all

<label class="toggle" for="ResponsiveMenu1-submenu" id="ResponsiveMenu1-title">Menu<span id="ResponsiveMenu1-icon"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span></label>
<input type="checkbox" id="ResponsiveMenu1-submenu">
<ul class="ResponsiveMenu1" id="ResponsiveMenu1" role="menu">
<li><a role="menuitem" href="#">Home</a></li>
<li><a role="menuitem" href="#">Blog</a></li>
<li><a role="menuitem" href="#">Work</a></li>
<li><a role="menuitem" href="#">About</a></li>
</ul>
In the above example, let's say we want the 'Blog' button to be always 'red'. You will need to do 2 things:

1. Note the ID of the responsive menu. In the above example it is 'ResponsiveMenu1'. If you change it to something else then use whatever you change it to. You need to decide on a class name also. In this example, lets use 'solidButton'. Now, lets enter some css code.

Click on Page --> Page HTML --> Between <head></head> tags and enter the following:

Code: Select all

<style>
#wb_ResponsiveMenu1 ul li.solidButton {background-color:#FF0000;}
</style>
Notice above where the ID and class we chose is put. If you change the names of either, make sure to change them here. Change the color to whatever color you want. In this example, it's red.

2. Now publish your page to hard drive. You will need to open the .html page using notepad or any html editor and locate the menu code above. Now we need to add the class to the correct <li> tag for the Blog button. So using the code above it will look like this:

Code: Select all

<label class="toggle" for="ResponsiveMenu1-submenu" id="ResponsiveMenu1-title">Menu<span id="ResponsiveMenu1-icon"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span></label>
<input type="checkbox" id="ResponsiveMenu1-submenu">
<ul class="ResponsiveMenu1" id="ResponsiveMenu1" role="menu">
<li><a role="menuitem" href="#">Home</a></li>
<li class="solidButton"><a role="menuitem" href="#">Blog</a></li>
<li><a role="menuitem" href="#">Work</a></li>
<li><a role="menuitem" href="#">About</a></li>
</ul>
Make sure to add the CSS class to the <li> tag just like above.

Unfortunately, there is no way from within WB to add the class to the <li> tag. If you are using the menu on mutliple pages, you can add the CSS code to the Site HTML and it will be added to each page.

hope this helps. :)
Markoc
 
 
Posts: 63
Joined: Tue May 29, 2018 12:19 am

Re: Change color of one menu item ?

Post by Markoc »

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: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Change color of one menu item ?

Post by crispy68 »

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: 127
Joined: Sun Oct 16, 2011 11:01 am

Re: Change color of one menu item ?

Post by Fender »

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: 161
Joined: Tue Oct 13, 2020 8:22 pm
Location: EU
Contact:

Re: Change color of one menu item ?

Post by smile »

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: 127
Joined: Sun Oct 16, 2011 11:01 am

Re: Change color of one menu item ?

Post by Fender »

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
User avatar
Fender
 
 
Posts: 127
Joined: Sun Oct 16, 2011 11:01 am

Re: Change color of one menu item ?

Post by Fender »

Found a better solution no hassle with nt child
Just make a HTML object
look herehttps://www.wysiwygwebbuilder.com/forum ... 26&t=90971

have fun
Fender
Post Reply