Need help? Check out our Support site, then


Adding an image in between menu items (Blissful Blog theme)

  1. Hi, is there a way to replace the vertical lines that separate my menu items with an image of my own?

    Is there also a way to remove the horizontal line on either side of the menu?

    And while I'm at it -- is there a way to remove the external border between the main content and the background?

    Thank you!

    The blog I need help with is awesome-anonymous.org.

  2. Hi, is there a way to replace the vertical lines that separate my menu items with an image of my own?

    Here is an example of removing the vertical lines (borders) from the left of main menu items in the Blissful Blog theme and adding images there instead:

    .main-navigation ul li {
    	border-left: 0;
    	background: url('http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png') no-repeat;
    	height: 32px;
    	padding-left: 32px;
    }
    
    .main-navigation ul li:first-child {
    	background: none;
    	padding-left: 0;
    }

    I used a logo image in my example, but you can replace the url() value with your own image and adjust the height and padding numbers until it looks good for your image.

  3. Is there also a way to remove the horizontal line on either side of the menu?

    I see that you figured this out using the following CSS:

    #navbar {
    	background: none
    }

    Nice work!

  4. Is there a way to remove the external border between the main content and the background?

    Looks like you also figured this one out using this CSS:

    #container {
    	box-shadow: none
    }

    Awesome!

  5. Oh woww Excellent thanks so much for the help!!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags