Add border or separating lines to header menu navigation labels

  • Resolved SALi2013

    (@sali2013)


    10 years, 3 months ago

    Good afternoon,

    Using a child theme for Hueman v2.1.9, I have centred the header menu with fixed width navigational labels (200px) containing bold centred text, to line up with graphics on my header image.

    But now I’m trying to add divider lines in between menu items (or separate in some other way, perhaps a border if its simpler).

    For example: | About | Category1 | Category2 | Contact |

    I’ve searched the support threads for simple solutions but nothing has worked for me so far. I’m still a novice to customising themes, so any idiot-proof suggestions would be really appreciated.
    Thank you for your time.

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hi sali. One way to accomplish that is to put a border on the menu list elements using css. The following will apply a red border to the right side of each menu item, and remove it from the last item:

    #nav-header .nav > li {
border-right: 1px solid #f00;
}
#nav-header .nav > li:last-child {
border: 0;
}
    Thread Starter SALi2013

    (@sali2013)

    Hi and many thanks for your assistance.

    I’ve added the above to the child theme stylesheet following other custom css but nothing changed. I tried adding it elsewhere but was left with a hideous “parse error/syntax error” that thankfully I’ve now fixed.

    I will mention that I tried to make other changes to the style.css yesterday that i felt sure would work, but they didn’t. I’m wondering if I have ‘tinkered’ a little too much?

    However if you are able to suggest anything else I could try I would be very grateful.

    If you can post a link to your site I’ll take a look.

    Thread Starter SALi2013

    (@sali2013)

    Hi, and thank you for taking a look. Its Saransons I’ve been making changes whilst in maintenance mode which I’ve just turned off. Theres not much to see at the moment as I wanted to customise prior to adding content and I’ve been working on graphics and articles.

    I’d be very grateful if you were able to point out any obvious blunders as custom changes have definitely been acting up.

    Couple of things. The reason your css isn’t being applied is because this php statement is in your child theme style.css:

    <?php elseif ( is_category() ): ?>
		<h1><i class=""></i><?php _e('','hueman'); ?> <span><?php echo single_cat_title('', false); ?></span></h1>

}

    Since that’s not valid css everything below that statement is being ignored. Remove that and the rest of your styles should work.

    Your custom.css file includes this statement:

    <body <?php body_class(); ?>>

}

    That’s not valid but, since there’s nothing below it in that css file, it’s not affecting anything. Still, it should be removed.

    Thread Starter SALi2013

    (@sali2013)

    Thank you very much for taking the time to look.
    I recognise the lines you quote as I’ve looked at them a few times and wondered what they did and why I might have put them there. I don’t remember adding them but as they didn’t appear to make any changes I’d left them alone for fear of losing something I needed. How wrong I was.

    I now keep a record of all changes I make to remind me later (as well as regular backups). However I will remove those lines and try the header menu css again.

    You mentioned keeping notes. Here’s a handy little plugin I use to keep notes in the Admin dashboard.

    Thread Starter SALi2013

    (@sali2013)

    Well, what do you know… it’s worked!

    I wouldn’t have figured that out in a month of Sundays!
    Many thanks, I’m very grateful for your help.

    Thread Starter SALi2013

    (@sali2013)

    Thanks for the plugin tip, I’d never thought of using one and it looks a much better idea. I’ve just been using Text Edit to make notes, but it can get a little untidy so I’ll give the plugin a try. Thank you.

    If you try the plugin you’ll notice that the notes are expanded by default. The rollup arrows are active; they just aren’t visible (plugin author’s choice). If you click the upper-right corner of the note it will roll up. I have some code to make the arrows visible if you decide to use it.

    Thread Starter SALi2013

    (@sali2013)

    Again, had you not mentioned it, I wouldn’t have realised the hidden expand/collapse arrow was there. Plugins that are not intuitive tend to get deactivated and deleted very quickly from my dashboard, which is a shame as this is useful.

    I realise you are busy with other support issues, however if you get a moment to supply the arrow visibility code I will definitely implement it. Thank you.

    1. Install the Add Admin CSS plugin. It shows up in the Appearance menu.

    2. Add this css:

    /* display rollup icon */
div[id^="note_"] .handlediv {
display:inline-block;
color:#aaa !important;
font:400 20px/1 dashicons;
}

    Here are some other changes I made to get more info in the note:

    /* less space under note title */
div[id^="note_"] .inside {
margin-top: -5px;
}
/* note options - less space on bottom, more on top */
div[id^="note_"] .wp-dashboard-note-options {
margin-bottom: -10px;
margin-top: 10px;
}
/* regular note - smaller font and line spacing */
div[id^="note_"] .wp-dashboard-note {
line-height: 1.2;
font-size: 13px;
}
/* list item notes - smaller font and line spacing */
div[id^="note_"] .list-item {
min-height: 20px;
line-height: 20px;
font-size: 12px;
}
/* list item notes - new entry less space */
div[id^="note_"] .list-note input[type=text].add-list-item {
font-size: 12px;
height: 25px;
}
    Thread Starter SALi2013

    (@sali2013)

    That’s great, I’ll install the plugin and additional code. Anything to make life simpler! Thank you.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Add border or separating lines to header menu navigation labels’ is closed to new replies.