Change color of one menu item ?

Markoc · Post by **Markoc** » Sat Nov 10, 2018 1:32 pm

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:

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

Post by **Pablo** » Sat Nov 10, 2018 4:00 pm

Some menus have a 'use hover style to indicated the current page' option.

Markoc · Post by **Markoc** » Sat Nov 10, 2018 5:01 pm

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

Post by **Pablo** » Sat Nov 10, 2018 6:04 pm

I'm sorry there is no standard solution for this. This will require custom code.

Markoc · Post by **Markoc** » Sat Nov 10, 2018 7:28 pm

Thanks!

Hoping someone else can chime in with an idea.

WWBman · Post by **WWBman** » Sat Nov 10, 2018 7:44 pm

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 · Post by **Markoc** » Sat Nov 10, 2018 8:03 pm

Thanks for the suggestion. Sort of a "last resort" option.

WWBman · Post by **WWBman** » Sat Nov 10, 2018 8:06 pm

Markoc wrote: ↑Sat Nov 10, 2018 8:03 pm Thanks for the suggestion. Sort of a "last resort" option.

Yeah, sorry!

WWBman · Post by **WWBman** » Sat Nov 10, 2018 8:23 pm

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 · Post by **Markoc** » Sat Nov 10, 2018 8:36 pm

Perhaps, but I would still need a sub-menu.

WWBman · Post by **WWBman** » Sat Nov 10, 2018 8:42 pm

First 2 items shapes, others a menu?

Markoc · Post by **Markoc** » Sat Nov 10, 2018 9:01 pm

worth a try. thanks

crispy68 · Post by **crispy68** » Sat Nov 10, 2018 9:20 pm

Are you willing to alter the published code by adding a simple class statement?

Markoc · Post by **Markoc** » Sun Nov 11, 2018 2:01 am

Yes I can do that

crispy68 · Post by **crispy68** » Sun Nov 11, 2018 4:45 pm

@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 · 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

crispy68 · 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.

Fender · 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 · 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.

Fender · 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

Fender · Post by **Fender** » Wed Dec 30, 2020 11:27 am

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

www.wysiwygwebbuilder.com

Change color of one menu item ?

Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?

Re: Change color of one menu item ?