• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 23.12.20, 03:14
  • Opened by: A.R Sarwary
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #20295 - Header menu

Where can i change header menu button colors for active - hover - visited

Comments

Fred 23 Dec 2020, 11:48

there is no such option through the back office panel.
You can do that with your custom CSS code

.button:hover {your:styles}
.button:active {your:styles}
.button:visited {your:styles}
A.R Sarwary 23 Dec 2020, 20:58

Unfortunately. is necessary if you want to make the menu in your house style. a module would be useful for this.

A.R Sarwary 24 Dec 2020, 02:36

now i have made a button with to class how can i use it for pk-menu?? becouse i see only one class can be added!!

.button-2{

width:140px;
height:50px;
border:2px solid #34495e;
float:left;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0 40px 50px;

}
.button-2 a{

font-family:arial;
font-size:16px;
color:#34495e;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;

}
.but{

width:140px;
height:50px;
top:-50px;
background:#34495e;
position:absolute;
transition:all .5s ease;
z-index:1;

}
.button-2:hover .but{

top:0;

}
.button-2:hover a{

color:#fff;

}
}

here is html code for test

<div class=”button-2”>

<div class="but">

  <a href="#"> Touch me </a>
</div>

</div>

Fred 24 Dec 2020, 10:44

1. Add your custom CSS to the Theme Settings → Customer CSS 2. Use Menu Builder (see video tutorials in the documentaion). Create a layout, add HTML block and add your button code there
3. More correct button code is

<a href="#" class="but">Touch me</a>
A.R Sarwary 24 Dec 2020, 17:39

ok, only this button is made with to class!!

class=”button-2” and class=”but”

on pk-menu i see you can only add one class.

Fred 26 Dec 2020, 10:58

Could you please show it to mee at a screenshot? because I can’t find the issue