Help on sticky horizontal menu please

[mwj427]

1) Script Title: sticky horizontal menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ontal-menu.htm

3) Describe problem:

I would like to receive help on:



1) Where can I change the color of the background and of the color of the hover?

2) Is it possible to add (or replace) the hamburger menu with the word "menu"? If so how and where?



Thanks in advance for any help.

MJ

[ddadmin]

To answer your questions:

1) This can all be done inside the .css file. See the highlighed lines:

div#stickymenudiv{
  width: 100%;
  position: relative;
  min-height: 50px; /* The minimum height of the sticky menu container */
  background: transparent;
  display: table;
  margin: 0;
  padding: 5px; /* The padding of the sticky menu container */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
"
"
div#stickymenudiv ul li a:hover{
  background: #F9EBBB;
}

For 2), modify the markup for the hamburger menu to include the desired text:

<button id="stickymobiletoggler">Menu</button>

Then inside stickymenumobile.css, you'll also want to remove the default styles that apply to stickymobiletoggler that render the hamburger look, or all styles with the selector button#stickymobiletoggler.

[mwj427]

Thanks for the reply. I will try this out asap to see if I can make it work.

[mwj427]

"Then inside stickymenumobile.css, you'll also want to remove the default styles that apply to stickymobiletoggler that render the hamburger look, or all styles with the selector button#stickymobiletoggler. "

Does this mean I delete all of the code associated with #stickymobiletoggler? I'm not following exactly what you're saying. Sorry...

On another note....is there a way to make the "logo button" invisible until it is scrolled and the the sticky one drops down? Then revealing the logo with the rest of the menu?

[mwj427]

When you say...."Then inside stickymenumobile.css, you'll also want to remove the default styles that apply to stickymobiletoggler that render the hamburger look, or all styles with the selector button#stickymobiletoggler. "

will you kindly highlight what I need to delete? I have messed around with it and can make everything go away or get both the hamburger and the text to show but not only the text. I am not sure what to remove and what to keep so that I have only the text remain, but keep the functionality to open the menu on mobile size.

Thanks!

[ddadmin]

Sorry for the delay. I've made the changes for you- check out the attachment. You can further refine the look of the "menu" text by styling the following:

button#stickymobiletoggler{   /* Main toggler button to toggle mobile menu state */
  z-index: 100;
  display: block; /* show mobile menu toggler */
  position: relative;
  font-size: 14px; /* change font size to change label dimensions. Leave width/height below alone */
  top: 0;
  left: 0;
  border-width: 0;
  background: white;
  z-index: 10000;
  cursor: pointer;
}

[mwj427]

Thank you so much. I have not had the chance to try it yet, but I'm sure it will be great. Sorry for the delay in saying thanks.