how do I... navigation bar queries

Hi again

A couple of nav bar questions, please help with exact code changes in exact places :slight_smile:

1) how to change the font so that it reflects the header fonts and not the body fonts.
2) how to change the appearance of the page buttons on the nav bar - I've noticed that all those with drop down menus have got extra padding on the rhs of the nav text - this makes the nav bar look a bit messy. How do I change that?

see here:

working with wpmu 2.9.2 and latest scholar theme

  • Cratar

    so I did what you said with the font family in the child.css - and it made zero changes. Not sure what now. I can't be sure what I did was perfectly right, cos I'm flying half blind with the little knowledge that I have. My fault yes, but see below....

    And I really have no idea how to change the li elements - I'm looking to make the nav bar labels/titles/whatever they're called in code-speak sit next to each other without any large gaps, which is what happens with the labels/titles/whatever they're called in code-speak that contain drop-down menus.

    I'm just looking for the support I'd expected when I spent a whack load of money here at wpmudev... an easy to understand image/text where I need to place the code I need (and an image/text of that). I understand that it's frustrating working with someone like me who has learnt what she knows through trial error / cutting and pasting etc and yet doesn't know css php etc. But it's equally frustrating for me to choose to pay for a product that promises great support and feel like the support I am getting doesn't quite match up to the clear, easy-to-understand "cut and paste this code I'm giving you in this spot (eg) here" I had expected.

  • Tammie

    @Cratar: I am more than willing to help and have given you code more than once to help so I think perhaps you are getting a little stressed by the deadline. That aside as always I am here to help where I can to all members as our goal is always to give you the highest level of support. I have already advised your changes really are not something you should be doing without knowing css and my examples are going to be limited on your knowing some css as you're going beyond basic theme configuration into advanced theme customisation. I think your claim you haven't been given cut and paste code is a little wrong considering I myself have given you copy and paste instructions more than once.

    If you mean the side padding in drop down li's this is part of the way the script works and I've not even myself tested that being wider or smaller or in fact how you would change that. You see our script is designed to work with or without javascript therefore that padding you are referring to may have an impact in either case if removed. There is a limitation on advanced theme customisation any theme company will offer but we are and always have done our best to educate and assist users. We can't go through every customisation a user may want on css and do it to the theme which to get copy and paste would be what I'd have to do.

    Now, you say you get extra padding which I think is due to you not having a link to the image / arrow perhaps? As in my testing I get no such extra bit. It also seems there are some changes to the navigation already as what I see doesn't reflect the default navigation I see for Scholar. Please revert any navigation changes you have made so we can start with a clear slate. For instance in your copy and paste in another post I see you've already change the navigation height and other parts. This is why we can only offer limited advanced customisation support as you could literally change anything and we can't be expected to keep track of all of your changes.

    I suspect your issues are around the following code from navigation.css:
    .sf-sub-indicator {
    position: absolute;
    display: block;
    right: .75em;
    top: 2em; /* IE6 only */
    width: 10px;
    height: 10px;
    text-indent: -999em;
    overflow: hidden;
    background: url('../images/arrows-ffffff.png') no-repeat -10px -100px !important; /* 8-bit indexed alpha png. IE6 gets solid image only */
    a > .sf-sub-indicator { /* give all except IE6 the correct values */
    top: 20px;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/

    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position: -20px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/

    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    background: url('../images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
    .sf-shadow ul.sf-shadow-off {
    background: transparent;

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.