[sfinnegan]

I’m hoping someone can help me figure this out — the navigation menu is suddenly not displaying on our website (phillipsmarketcenter.com), which is currently using the Create theme. When you click the menu icon on mobile, it will change from the hamburger to an X, but no menu is shown. The menus DO all display properly on desktop. Any help is appreciated!

[Sakin]

@sfinnegan: I just check your website and I see that you have added a lot of CSS code in the “Appearance => Customize => Additional CSS” box. You are supposed to add only what you want to edit and not all the CSS codes. That is the reason you are having issues. Please remove it and it will work fine.

[sfinnegan]

When I remove it from that area, it strips all of the formatting we have set up. Clearly I’m no developer! How do I maintain the styling but get the mobile nav menu back?

[Sakin]

@sfinnegan: As I told you, you just need to add the CSS that you want to change. So, looking at your changes. I have come up with the Custom CSS that you can replace. Please replace your Current CSS with the following CSS in the”Appearance => Customize => Additional CSS”:

body {
    font: 16px/1.8 'Century Gothic', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Century Gothic', sans-serif;
    color: #1e6a97;
    font-weight: 600;
    line-height: 2.1;
}

a {
  color: #89813d;
}

a:hover,
a:focus,
a:active {
    color: #89813d;
}

.site-banner {
    background-color: #1e6a97;
    opacity: 0.96;
}

.main-navigation {
  background-color: #1e6a97;
}

.main-navigation ul ul a {
  background-color: #1c5f86;
  border-bottom: 2px solid #1f6a96;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a, 
.main-navigation .current_page_ancestor > a {
  color: #cfa205;
}

.create-menu a:hover,
.create-menu a:focus {
    color: #89813d;
}

.site-title {
    font-size: 80px;
    font-family: 'Century Gothic', sans-serif;
    font-weight: 400;
}

.site-title a {
    color: #d6d2c4;
}

.site-title a:hover,
.site-title a:focus {
    color: #d6d2c4;
}

.site-description {
    color: #d6d2c4;
    font-size: 50px;
    font-family: 'Allura', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: none;
}

.social-menu {
    background-color: #89813d;
}

.social-menu ul a {
    border: 3px solid #d6d2c4;
    color: #d6d2c4;
}

.social-menu ul a:hover,
.social-menu ul a:focus {
    border-color: #1e6a97;
    color: #1e6a97;
}

.site-info {
  background-color: #1E6A97;
  opacity: 0.96;
  color: #d6d2c4;
}

@media screen and (max-width: 960px) {
    .site-title {
        font-size: xx-large; /* Plays nicely in all browsers */
    }

    .site-description {
        font-size: medium; /* Plays nicely in all browsers */
    }

    .create-menu ul {
        background-color: #1c5f86;
    }

    .dropdown-toggle {
        border-left: 2px solid #1f6a96;
    }

    .main-navigation a, .main-navigation ul ul li a {
        background-color: #1c5f86;
        border-bottom: 2px solid #1f6a96;
    }
}

Regards,
Sakin

[sfinnegan]

You’re a wizard! Thank you so much, that brought the mobile menu back and kept most of the styling we had set up. One thing I’m seeing though is that the font is not correct in the nav menus or throughout the site on mobile. In the customizer mobile preview area it looks correct (except in the menus), but on my actual mobile phone the fonts are not correct. Is that a change in the CSS somewhere that I need to make? I see in the code you listed above that you do have the correct one in there—Century Gothic.

[Sakin]

@sfinnegan: For the Menu, you can change the font family with the following CSS:

.create-menu a {
	font-family: 'Century Gothic', sans-serif;
}

The Century Gothic is not a web font. So, if the font is not there in the device you are viewing then it will load the alternate san-serif font. That is what happens to your mobile devices.

[Author]

Posts