[jrhager84Participant]

My mistake. We had to switch to dedicated hosting, so it was probably in transfer while you checked. It should be good now. Please re-check.

http://www.steveslanding.com

[RadModerator]

Hi there,

Still the same on my end, there is no menu and error is more than the previous screenshots.

I cleared my browser cache and tried on other machine and just the same. What you’re currently getting?

Thanks!

[jrhager84Participant]

It was apparently an errant caching plugin. Try now please.

[RadModerator]

Hi there,

Yes, it’s displaying okay now on my end.

Before we continue. let’s correct your content formatting first.

<ul><a href="http://www.steveslanding.com/menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">DINNER MENU</h5></a>

<a href="http://www.steveslanding.com/drink-menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">DRINK MENU</h5></a>

<a href="http://www.steveslanding.com/kids-menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">KIDS' MENU</h5></a></ul>

Please change it into this,

<ul>
<li>
<a href="http://www.steveslanding.com/menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">DINNER MENU</h5></a>
</li>
<li>
<a href="http://www.steveslanding.com/drink-menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">DRINK MENU</h5></a>
</li>
<li>
<a href="http://www.steveslanding.com/kids-menu"><h5 class="sfm-submenu" style="font: raleway; text-align: center;">KIDS' MENU</h5></a>
</li>
</ul>

HTML element should be implemented with correct formatting. <ul> child is always <li>.

Let me know when done.

Thanks!

[jrhager84Participant]

Done.

[RadModerator]

Hi there,

Thanks! Then please try adding this CSS,

  .sfm-content-wrapper ul > li > a > h5 {
  color: #34aaef;
font-size: 20px;
  }
  .sfm-content-wrapper ul > li > a:hover > h5 {
  color: mediumseagreen;
  }

That should do it, cheers! Make sure the cache are cleared before testing.

[jrhager84Participant]

Thanks! Since I’ve got you, I’m throwing font awesome 404’s now with the custom footer fonts. How do I fix that?

[jrhager84Participant]

Is there a way to also use the semi-opaque border highlight animation as well?

[RadModerator]

Hi there,

Would you mind clarifying the issue you’re getting on the footer fonts? I don’t see any 404 requests.

About the highlight,

1. Please change your menu content to this,

<ul>
<li><a href="http://www.steveslanding.com/menu">DINNER MENU</a></li>
<li><a href="http://www.steveslanding.com/drink-menu">DRINK MENU</a></li>
<li><a href="http://www.steveslanding.com/kids-menu">KIDS' MENU</a></li>
</ul>

2. Then change the recently provided CSS to this,

.sfm-content-wrapper ul, .sfm-content-wrapper {
margin: 0px;
padding: 0px;
}
.sfm-content-wrapper ul > li {
line-height: auto !important;
}
  .sfm-content-wrapper ul > li > a {
  color: #34aaef;
font-size: 20px;
padding: 25px 0 !important;
text-transform: uppercase;
display: block;
padding-left: 28px !important;
position: relative;
  }
  .sfm-content-wrapper ul > li > a:hover {
  color: mediumseagreen;
  }

.sfm-content-wrapper ul > li > a:before {
position: absolute;
    top: 0;
    left: 0;
    content: "";
    bottom: 0;
    width: 0;
    z-index: 0;
    background: rgba(255,255,255,.075);
    transition: all .3s cubic-bezier(.215,.061,.355,1);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block!important;
}
.sfm-content-wrapper ul > li > a:hover:before {
width: 100%;
}

That should do it 🙂

Cheers!

[jrhager84Participant]

The 404 errors are in the GTMetrix waterfall. I’m not sure, but maybe the 404 goes away after Cloudflare has the ability to properly cache? Cause it’s not there currently.

Also – THANK YOU for giving me the CSS code to fix it. You guys are top-notch.

Rad is totally RAD!

[jrhager84Participant]

One quick question — Now instead of the plain black background in the mobile hamburger, it’s semi-transparent, making it harder to read the submenu. Is there a media query I can use to make the hamburger’d menu to have a solid background?

[LelyModerator]

Hi There,

Please try the following CSS:

#sfm-sidebar .sfm-menu li{
    background: #000 !important; /*For main menu background*/
}
.sfm-content-wrapper ul>li>a {
    background: #000 !important;  /*For submenu background*/
}

Hope this helps.

[jrhager84Participant]

So – How would I code that to *only* apply when the sidebar is hamburgered? A media query? Do you happen to know the first media query where the menu hamburgers by default?

[ChristopherModerator]

Hi there,

Please update your code to :

@media screen and (max-width: 782px){

#sfm-sidebar .sfm-menu li{
    background: #000 !important; /*For main menu background*/
}
.sfm-content-wrapper ul>li>a {
    background: #000 !important;  /*For submenu background*/
}
}

Hope it helps.

[jrhager84Participant]

It doesn’t seem to be making the submenu opaque still. Any ideas?

[Author]

Posts