Need help cleaning up CSS and problem with Navbar Font

Support
#1

Hi,

I have recently had my site exactly how I’d like it however I tried to add some CSS and the font in the Navbar had changed.

I have a custom font uploaded at that is still working fine for Headings, Post Titles, Widget Title and for Mobile Menu, it even still works for the Sub Menu, although the font is now too big on desktop. Just not the main menu.

Thank you for your help and I do apologise for being a newbie to CSS.

The URL is http://becomeanathlete.co.uk/

I can send login details if required.

Many many thanks

Phil

#2

Hi There,

Thanks for writing in!

Can you please add this css to your custom css and let us know how it goes.

.x-navbar .x-nav-wrap .x-nav > li > a {
   font-family: "bebas_neuebold" !important;
}

Thanks

#3

Thank you for replying, however I think there is some conflict of some sort or an incomplete code.
This is what I have in Customize - Edit Global CSS.

.x-colophon {
background-color: #ffffff;
}

.x-btn.my-btn {
  color: #ffffff;
  border-color: #ffffff;
}

.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #ffffff;
}
.x-btn.orange-btn {
  color: #F4511E;
  border-color: #F4511E;
}

.x-btn.orange-btn:hover {
  color: #000000;
  border-color: #000000;
}

.x-btn-navbar.collapsed {
    color: rgba(0,0,0,1);
    box-shadow: none;
}

.x-btn-navbar.collapsed:hover {
    box-shadow: none;
    background: transparent;
    color: rgba(0,0,0,1);
}
  @media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
osition: fixed;
}

.x-btn-navbar {
    box-shadow: none;
    background: transparent;
}
.x-navbar .x-nav .sub-menu a {
   font-size: 20px;
}
.x-boxed-layout-active .entry-wrap {
    border:0;
}

.entry-wrap {
    box-shadow: none;
}
.widget {
  text-shadow: none !important;
}
.x-navbar .x-nav > li > a {
  font-family: "bebas_neuebold" !important;
}

@media (max-width: 979px) {
    .x-navbar .mobile .x-nav li>a {
       font-size:20px !important;
    }
@media (min-width:  979px) {/*For desktop*/
.single body.entry-title { /* Blog heading Title */
    font-size: 35px;
}
}
@media (max-width:  978px) {/*For mobile*/
.single body.entry-title { /* Blog heading Title */
    font-size: 20px;
}

}
}@media (max-width: 1000px) {
.single-post .x-main .x-container.width {
    width: 100%;
}

.single-post .entry-wrap {
    padding:6px;
  }
#4

Hi there,

There are a lot of missing close } in your code. Please try this:

.x-colophon {
background-color: #ffffff;
}

.x-btn.my-btn {
  color: #ffffff;
  border-color: #ffffff;
}

.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #ffffff;
}
.x-btn.orange-btn {
  color: #F4511E;
  border-color: #F4511E;
}

.x-btn.orange-btn:hover {
  color: #000000;
  border-color: #000000;
}

.x-btn-navbar.collapsed {
    color: rgba(0,0,0,1);
    box-shadow: none;
}

.x-btn-navbar.collapsed:hover {
    box-shadow: none;
    background: transparent;
    color: rgba(0,0,0,1);
}
  
@media (max-width: 979px) {
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }

    .x-btn-navbar {
        box-shadow: none;
        background: transparent;
    }
    .x-navbar .x-nav .sub-menu a {
    font-size: 20px;
    }
    .x-boxed-layout-active .entry-wrap {
        border:0;
    }

    .entry-wrap {
        box-shadow: none;
    }
    .widget {
    text-shadow: none !important;
    }
    .x-navbar .x-nav > li > a {
    font-family: "bebas_neuebold" !important;
    }
}

@media (max-width: 979px) {
    .x-navbar .mobile .x-nav li>a {
       font-size:20px !important;
    }
}
@media (min-width:  979px) {/*For desktop*/
    .single body.entry-title { /* Blog heading Title */
        font-size: 35px;
    }
}

@media (max-width:  978px) {/*For mobile*/
    .single body.entry-title { /* Blog heading Title */
        font-size: 20px;
    }
}

@media (max-width: 1000px) {
    .single-post .x-main .x-container.width {
        width: 100%;
    }

    .single-post .entry-wrap {
        padding:6px;
    }
}

Hope this helps.

#5

Hi,

Thank you for helping however the main menu font is still not Bebas.

I am sorry for the questions.

This is what I’ve got is the Child Theme Style Sheet:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/


@font-face {
    font-family: 'bebas_neuebold';
    src: url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.eot');
    src: url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('http://www.becomeanathlete.co.uk/wp-content/themes/x-child/fonts/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

h1, h2, h3, h4, h5, #site-logo, .post-title, .widgettitle, .x-nav, x.btn {
    font-family: "bebas_neuebold" !important;
}
.x-btn {
font-family: 'bebas_neuebold' !important;
}
.x-navbar .x-nav, .sub-menu a {
   font-size: 30px;
}
.my-custom-feature-box .x-feature-box-title {
  font-size: 1.8em;
line-height: 0.9em;
letter-spacing: 0.1em;
}
.x-navbar .x-nav > li.menu-item-10673 > a {
    padding-top: 10px;
}

.x-navbar .x-nav > li.menu-item-10673 > a:hover {
    box-shadow: none;
    color: black;
}

.x-navbar .x-nav > li.menu-item-10673 > a > span {
    padding: 10px;
    margin-top: -10px;
    background-color: #F1F1F2;
}
#6

Hi there,

Please update this line:

h1, h2, h3, h4, h5, #site-logo, .post-title, .widgettitle, .x-nav, x.btn {
    font-family: "bebas_neuebold" !important;
}

to

h1, h2, h3, h4, h5, #site-logo, .post-title, .widgettitle, .x-nav, x.btn,
.x-navbar .x-nav-wrap .x-nav > li > a  {
    font-family: "bebas_neuebold" !important;
}

Then please make sure to clear your browser cache after saving the style.css file of the child theme.

Hope this helps.

#7

Thank you again.
I’ve swapped this in and the Navbar font has changed. However now the button font has reverted and now not Bebas.

Also, the submenu font on desktop is HUGE, haha, would like it the same size as the main menu font.

I really really sincerely appreciate your help.

I’ve added a couple of screen shots

#8

Hi there,

You added an incorrect code again where you added the closing curly brace twice which caused the CSS not to work.

Please remove the extra closing curly brace and be mindful of the correct CSS syntax when you add a code to the CSS code.

As for the submenu font size, it shows bigger than the main menu items because of this CSS in the style.css file:

.x-navbar .x-nav, .sub-menu a {
   font-size: 30px;
}

And the main menu items are set to 24px in the customizer.

You can edit the CSS code and set it to 24px so that they sub menu and menu items will have the same size.

Hope this helps.

#9

Absolutely amazing, Thank you so much.
I’m learning all the time.
The support on here is one of the best customer services I’ve experienced across all types of businesses including restaurants and hotels!

#10

You’re most welcome, and thank you for your kind words. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.