How to CSS border spacing (or) padding background image separately?

Tags: css,wordpress,menu,navigation,background-image

Problem :

My Wordpress (TwentyTwelve) nav menu works great, but with design I would like to do this, but can't ;

  • no background to the navigation (clear, we see page background) = done
  • li a border-right 1px solid = done
  • li a hover background image, no repeat, bottom center = done

So the problem is : my bg image is way too close to my nav text... but if I add padding or line-height, then the border-right gets too long.

So How can I add spacing under my nav text, so that my bg image (hover) gets lower, but without the right-border line getting longer ?

See my CSS code if it helps


.main-navigation li a {
color: #fff;
line-height: 1.0;
text-transform: uppercase;
white-space: nowrap;
padding:0 15px 10px 15px; 
border-right:#8fbf3d 1px solid;

.main-navigation li a:hover {
color: #fff;
background:url('') no-repeat bottom center;

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #8fbf3d;
font-weight: bold;
background:url('') no-repeat bottom center;


Solution :

still not found that magic way to do this... but I found an alternative that could work

  • deleted the right-border
  • added a background image looking like a right-border line (but its a jpeg) and put it align right
  • added my previous padding-bottom


    CSS Howto..

    How can I vertically align this navigation bar?

    How to use CSS Background-size: cover; but leave space for menu?

    background image also header image cc trick how to do it? [closed]

    How to set a image over another in the same tag via CSS?

    How to align image within nested div<> with spaces in div names

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How to disable flow around elements in table (CSS)

    CSS? How is this arrow made?

    How to change the css and html file at the same time

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How to move a span after an img?

    How to keep text in textfield even after focus and remove on key press?

    How to remove a CSS class from all same level table rows When a Row is Selected?

    How do I display a DIV if the current version of the program is greater than the version I have?

    How to create custom border style in JavaFX CSS?

    css image not showing up

    Why are items showing up in my instead of [closed]

    In CSS, how to scale multiple overlayed images responsively?

    How to highlight a whole table cell with padding when hovering?

    How to set CSS class to Button control using Session value in design page

    How to style a 3rd-party iFrame [duplicate]

    How can I center three tables in a div?

    How to change position of a sphere overtime using css

    Show overlay fullscreen div then hide it by clicking on it

    How to override a css !important property using jQuery with transitions

    How to display inline with rails?

    How to get hoverover text to be at the same line-height as the triggering text

    How read(get) css style value of a server-side div in code behind(not set)?

    How to style DOM element with CSS that was created with JavaScript function

    how to get the value of css style using jquery