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

  • Author
    Posts
  • #1109127

    lynerjy
    Member

    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.

    #1109349

    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.

    #1109350

    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!

    #1109351

    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!

    #1109355

    lynerjy
    Member

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

The topic ‘Adding an image in between menu items (Blissful Blog theme)’ is closed to new replies.