Changing the Business Portfolio Menu

I am using the Business Portfolio theme (child) and I need to make the fonts and the size of the entire main menu smaller.

My firebug just doesn't seem to be working so I can't find where the code is. I would like the fonts smaller and the actual space between the nav-line image to be smaller too. Basically I need the entire menu to be smaller to accommodate more menu items so that it does not make a second line.

Screen shot attached.

Thanks.

  • Tammie

    The entire menu uses a class called .sf-menu.

    Here are some examples of the code and where it is:

    .sf-menu {
        text-transform: uppercase;
    }
    typography.css (line 271)
    .sf-menu {
        float: left;
    }
    layout.css (line 879)
    .sf-menu {
        text-transform: uppercase;
    }
    layout.css (line 831)
    .sf-menu, .sf-menu * {
        list-style: none outside none;
        margin: 0;
        padding: 2px;
        text-align: left;
    }
    layout.css (line 825)
    
    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu .current_page_item, .sf-menu .selected {
        color: #748D5A;
        font-family: Helvetica,"Century Gothic",Arial;
        font-size: 25px;
        outline: 0 none;
    }
    layout.css (line 969)
    .sf-menu li {
        background: url("../../library/styles/colour-images/nav-line.jpg") no-repeat scroll right center #FFFFFF;
    }
    layout.css (line 888)
    .sf-menu li {
        float: left;
        position: relative;
    }
    layout.css (line 845)
    .sf-menu, .sf-menu * {
        list-style: none outside none;
        margin: 0;
        padding: 2px;
        text-align: left;
    }

    Now, the problem is going to come with spacing as you adjust for instance you may have to adjust this:

    .sf-menu a, .sf-menu a:visited {
        color: #333333;
        font-family: Helvetica,"Century Gothic",Arial;
        font-size: 25px;
    }

    Leading to spacing on the div above: .sitenav

    Hopefully though this gives you an 'in road' so to speak.

  • JoAnn

    Thanks Tammie,

    I have played with those and made some changes that helped, but if I change it too much I lose the clean look of the template which I love. I have changed the 25px to 14px everywhere I need to and it looks pretty nice.

    I think I will just use side menus for the extras and just keep a few menu items on top.

    Thanks for the code directions, I will keep them in my file for future use.

    Oh, did I mention how much I love this template?

    Well, I LOVE THIS TEMPLATE!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.