Hello @wekrea8,
Regarding adding the menu text behind the hamburger menu, this is not available in the customize, but you can put the CSS below in Customizing > Custom CSS/JS > CSS Code, to add it:
@media(min-width: 980px) {
#site-header.full_screen-header .menu-bar {
padding-right: 60px;
}
#site-header.full_screen-header .menu-bar-inner {
position: relative;
}
#site-header.full_screen-header #site-navigation-wrap:before {
content: 'Menu';
position: relative;
font-size: 21px;
line-height: 1.7;
top: 50%;
right: auto;
left: 100px;
transform: translateY(-50%);
color: #e0b833;
font-weight: 400;
}
}
To changing the size of the hamburger menu, add the CSS below:
@media(min-width: 980px) {
#site-header.full_screen-header #site-navigation-wrap {
transform: scale(1.2, 1.2);
}
}
Regarding the hover effects, you can use the Custom CSS and using the transition; you can search about that on Youtube or read this article: https://css-tricks.com/almanac/properties/t/transition/
_________________________
You can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.
CSS Tutorial: https://www.w3schools.com/css/
CSS Units: https://www.w3schools.com/cssref/css_units.asp
Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Put your CSS on custom screen size:
@media only screen and (max-width: 480px) {
/* put you CSS here*/
}
Or use between sizes:
@media (max-width: 960px) and (min-width: 481px){
/* put you CSS here */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
Best Regards
