Need help? Check out our Support site, then


Changing menu font in Suits theme

  1. 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.

  2. 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

  3. 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!

  4. 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. :)

  5. 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

  6. 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.

  7. 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

  8. 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.'

    https://i.cloudup.com/oFWDFWRSq1.png

    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':

    https://i.cloudup.com/4MeRx3Vs4S.png

    Let me know if I can help with anything else!

Topic Closed

This topic has been closed to new replies.

About this Topic