[Karl]

Thank you for having this forum for me. My “Rock Star Pro” has a responsive header/menu behavior issue. I just don’t know where in the code to find the answer to this. When I reduce the width of my browser window, the menu moves to the left (as expected) to use the empty header landscape between it and the Site Title and Tagline. Once the menu reaches the Tagline, the header expands down to “slide” the menu under the tagline. This is causing the header to cover the h1 headings on my pages. I have tried it on this catchthemes.com site and it behaves well! Is it possible to change this behavior on my site so when the menu reaches the tagline it simply changes to Mobile Menu mode without dropping down instead? I may be adding another menuitem or two in the future and I don’t mind experimenting with the values that control this behavior, I just don’t know where to find the code for it. This is happening all over my site. Here is the URL to the page that is most troublesome:
http://karlstest.com/services

[tikaram]

@karl : Go to Appearance => Customize => Additional css and add the following css.

@media screen and (max-width:1160px) {
#menu-toggle,
.site-header-menu.toggled-on {
display: block;
}

 .site-header-menu {
  display: none;
 }

.is-sticky .main-navigation a,
  .main-navigation a{
   padding: 12px 15px;
}

.main-navigation .menu {
   border-bottom: 1px solid #666;
}
 
 .main-navigation .menu > li {
  float: none;
   border-top: 1px solid #666;
 }

}

Let me know if you need further assistance.

Regards,
Tikaram

[Author]

Posts