How to make the menu in header become a hamburger like in Graphy

Hi @themebreaker

Please use Navigation Bar and add the following code to Custom CSS.

.site-bar, .main-navigation ul ul {
  background-color: #fff;
}
.menu-toggle, .main-navigation a {
  color: #333;
}
.menu-toggle:hover, .main-navigation a:hover {
  color: #111;
}
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a {
  color: #111;
}
.main-navigation {
    border-top: solid 1px #eee;
}
.main-navigation a,
.main-navigation ul ul li a {
    border-color: #eee;
}
.main-navigation .search-field {
  background-image: url("/wp-content/themes/first/images/search-icon-ov.png");
}

Regards,
Takao Utsumi

• This reply was modified 6 years, 9 months ago by Takao Utsumi.

Thank you, as always, for your prompt and helpful reply. I’ve successfully applied the code, but was wondering how to make the top and bottom lines the same length?

Having a white navbar will be really useful if I can’t figure out how to collapse the header menu into a hamburger. (In desktop view, I prefer the appearance of a left aligned title and right aligned header menu in the same line because I’m going to attempt (!!!) to shrink the whole header on scroll to 45px and make it sticky.)

Your beautiful typography makes me determined to build my site by combining elements of your themes, although you can probably guess from my username that I make more mistakes than progress! I have another question about logos, but will start another thread so that other folk can benefit from any replies. Thanks again.

OK, please change the following code

.main-navigation {
    border-top: solid 1px #eee;
}

to

.site-bar {
    border-top: solid 1px #eee;
}

Dear Takao/Mr Utsumi (Forgive me, but I’m Scottish and so don’t know how to address you correctly and in a friendly way but with respect.)
It worked perfectly and the lines are now the same! Your themes are elegant because of the attention to detail, so I’m working hard to get the details how I want them, without losing the original beauty of the styling and typography.

Thank you!