Header - Display issues with links

[benjaminasher]

Summary

www.benjaminaproductions.com

1. Is there a way to remove the purple bar under the headings, when the page first loads, and then have it be visible on scroll?

2. When you start to scroll, the link, which is blue, goes back to gray - can I keep it blue the entire time?

3. I’ve noticed that for smaller resolutions, or screens with enhanced scaling, the links start to drop below the logo, in the header. Is there a way to keep everything inline, no matter the display settings?

[nico]

Hi @benjaminasher,

Thanks for writing in.

1. This a custom coding and it is quite complicated. I could not guarantee that it will work properly. Try this code below:

.x-navbar.x-navbar-fixed-top .desktop .x-nav > .x-active > a, 
.x-navbar.x-navbar-fixed-top  .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 hsla(315,100%,50%,0.95);
}


.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

2. Use this code below:

.x-navbar .desktop .x-nav > .current-menu-item > a{
  color: rgb(94,188,222) !important;
}

3. I recommend that you will trigger your mobile menu earlier instead of make your header responsive because it is quite to be complicated and the menu will not show okay or it is kind a small space and sizes.

To trigger your setup menu earlier, you could follow the thread below:

Menu bar is dependent on the width of the device

Hope it helps.

Let us know how it goes.

Thanks.

[benjaminasher]

I tried using the code to make the mobile menu appear earlier, but it didn’t work.

/* Make mobile button appear earlier */
@media (max-width: 1140px) {
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile {
display: block;
}
.x-nav-wrap.mobile.x-collapsed {
display: none;
}
.masthead-stacked .x-btn-navbar {
display: inline-block;
}

Also, it is possible to give the mobile menu a white semi-transparent background?

[nabeel]

Hi again,

• To make the mobile menu appear earlier, use this code instead:

@media screen and (max-width: 1140px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

• To give a mobile menu a background, add the following code as well:

.x-nav-wrap.mobile {
    background: rgba(255, 255, 255, 0.34);
    padding: 20px;
}

Hope this helps!