Changing menu font in Suits theme

  • Author
    Posts
  • #1766697

    loopeyliz
    Member

    Really new to web building and CSS but I’m making a very basic website for a graphic design job I’ve done, and all I’m interested in changing using CSS is the font typeface.

    I have managed to change the fonts for the headers and body using “body” and “h1”. What do I add to this to change the font of the links in the menu bar (eg. “about”) as well as it doesn’t seem to have changed.

    Sorry if this doesn’t make sense, I’m new to CSS but am hoping this is the only coding I will have to do to achieve what I want here.

    Thanks :)

    The blog I need help with is promisesdoncaster.com.

    #1766704

    Hi there, to apply the same font stack you are using in the main body, change the selector you have now to this, which adds the selector for the menu.

    *, .nav-menu li a

    If you wish to change the font of the menu to something different than the body font, then you can create a separate rule like this:

    .nav-menu li a {
    font-family: "times new roman, georgia, serif;
    }

    One thing to remember on fonts, is that not all computers will have the all fonts, and the browser looks for the fonts first in the computer, if you are not using the Custom Fonts from Typekit that is part of the Custom Design package. For more on cross-platform fonts, take a look here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    #1766705

    loopeyliz
    Member

    Thanks very much! Yeah at the moment I have this coding to make sure something works

    font-family: “HelveticaNeue-Thin”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif

    Sorry I didn’t realise the header of my page also hasn’t changed, for example “about”. Can I change the style to being normal and lowercase rather than bold and uppercase and being aligned centrally?

    Thanks very much for your help!

    #1766709

    Hi there, I see you have gotten the page titles sorted out with the following CSS:

    h1.entry-title {
        font-family: "HelveticaNeue-Thin","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
        font-weight: 300;
        text-transform: none;
    }

    If you have further questions, please let us know. Your site is looking awesome. Nice and clean. Cool logo/header image too. :)

    #1766712

    loopeyliz
    Member

    Yeah I managed it in the end, figured out the right click > “inspect element” function on Mac.

    Thanks very much! Glad I could make it look the way I wanted with WordPress :)

    Final couple of things I’m struggling with just to finish the site off and it would be awesome if you could help me out with:

    1) I can’t seem to change the typeface in the social media widget titles on my side bar. I tried using “h3.widget-title” but having no luck.

    2) I was wondering if it was possible to remove the “leave a reply” box at the bottom of my pages? It’s mainly being used as a website so if possible I think it would look neater without.

    3) Is there any way to amend the spacing between my header and the menu bar? It’s just looking a little cramped up there especially with the wordpress bar across the top of the header.

    Thanks so much for your help so far, this is my first time doing any web based design and WordPress has been really accessible. Very interested in looking into learning CSS properly in the future!

    Regards,

    Dan

    #1766718

    Dan, glad you’ve got the inspector going. Once you get used to it, I think you will find it a great asset when doing CSS.

    1) I can’t seem to change the typeface in the social media widget titles on my side bar. I tried using “h3.widget-title” but having no luck.

    Let’s make a slight change to the selector you are using to the following.

    h1.entry-title, h3, .widget .widget-title {
        font-family: "HelveticaNeue-Thin","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
        font-weight: 300;
        text-transform: none;
    }

    2) I was wondering if it was possible to remove the “leave a reply” box at the bottom of my pages? It’s mainly being used as a website so if possible I think it would look neater without.

    You can turn comments off globally for all future posts and pages (which can be overridden when creating a new post or page) or you can turn comments off on a post-by-post or page-by-page basis in the Discussion module in the editor. If the Discussion module does not show down below the text area in the editor, go to the top right to Screen Options and activate the Discussion module. When you uncheck “Allow Comments” and “Allow Trackbacks” the Leave a reply box will go away.

    3) Is there any way to amend the spacing between my header and the menu bar? It’s just looking a little cramped up there especially with the wordpress bar across the top of the header.

    Sure, add the following. The first will allow adding space above the header image and the second space above the nav bar.

    .site-header {
        margin-top: 20px;
    }
    #navbar {
        margin-top: 20px;
    }

    You are welcome, and CSS can be a lot of fun.

    #1766719

    loopeyliz
    Member

    Thanks man,

    That all makes perfect sense apart from “2)”. Can’t seem to find those options anywhere. Have I missed something completely or is the editor the admin page as in wordpress.com/wp-admin etc? I tried looking in Settings>Discussion in the menu bar but can’t seem to find what I’m looking for. Sorry if I’ve missed something fundamental, I just seem to have tried unchecking everything to do with posts etc and it’s not going away.

    Thanks again,

    D

    #1766722

    Hi Dan!

    Sorry for the delay! If you don’t see the Discussion module, click on ‘Screen Options’ at the top of the page and check the box next to ‘Discussion.’

    You’ll only be able to do this from the editor, so make sure you’re editing a post when you do this!

    Then you can close comments on a page by scrolling down to the Discussion module. Uncheck the box next to ‘Allow comments’:

    Let me know if I can help with anything else!

The topic ‘Changing menu font in Suits theme’ is closed to new replies.