Need help? Check out our Support site, then


How can I make changes to the font and layout of menu in Blissful theme

  1. thedesignlineltd
    Member

    Hi there,

    I am trying to change the style and size of the font in the menu bar however even in the CSS style sheet is only seems to allow two options for fonts (neither of which I would like to use)

    http://designlinewaiheke.wordpress.com/

    Is there any way I can continue to use the Blissful theme and somehow change the menu
    1) a modern sans serif font
    2) more space between the words
    3) and get rid of the lines beside and surrounding the menu

    thank you very much in advance to anyone who is able to help :)

    The blog I need help with is designlinewaihekeisland.wordpress.com.

  2. thedesignlineltd
    Member

    actually this is the blog I need help with :)

    http://designlinewaiheke.wordpress.com/

  3. 1) a modern sans serif font

    First, I would recommend trying the custom fonts tool in Appearance → Custom Design → Fonts to see if you can find a modern font you like there. You would need to set the font as the "Body Text" but then you could apply a new font rule to override the other body text later if you wanted to set those back to something more common/standard.

    Another option would be to target the fonts in just the main menu only, and you could use a normal font stack:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    Here is an example that will change just the main menu fonts in the Photographer theme using a standard font stack:

    #navbar {
    	font-family: “Century Gothic”, “Apple Gothic”, sans-serif !important;
    }
  4. 2) more space between the words

    The space between the main menu items in the Photographer theme is setup using padding around the links. You can adjust it using CSS like this:

    .main-navigation ul li a {
    	padding: 0 25px 0 25px;
    }

    Change the 25px values to different numbers until you find the spacing that you think works best.

  5. 3) and get rid of the lines beside and surrounding the menu

    To remove the horizontal line behind the main menu and the lines between main menu items in the Photographer theme, you could add this css to your Appearance → Themes → Customize → CSS panel:

    #navbar {
    	background: none;
    }
    
    .main-navigation ul li {
    	border: none;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic