How to add a linked image in menu bar

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Hello I’d like to add some daisy icons in my menu bar/navigation bar. How do I do this? The icon is
    here:

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Hi again Sarah,

    The first thing to do is to shrink your image down to the size you want it to appear on your site. It’s currently huge and will slow down your page loading time – which is something to be avoided. Once that’s done you could use some code like this to add one before and after your navigation:

    li.menu-item-1279 {
  padding-left:30px;
  background:url("http://placehold.it/30x30") left center no-repeat;
}

li.menu-item-4564 {
  padding-right:30px;
  background:url("http://placehold.it/30x30") right center no-repeat;
}

    Just swap out the placeholder URL with your resized image, in this case it’s assuming you’re going to use an image that’s a 30px square. You should also see that it targets the unique menu items you are currently using (the weird 4 digit numbers) so if you change your menu you might have to change the CSS too – just a little something to remember for the future!

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks just tried using the above code and can’t see any changes. I haven’t replaced the URL yet though…

  • Unknown's avatar
    hallluke · Member ·

    Strange – try changing the menu item numbers to this instead:

    li.menu-item-4572 {
  padding-left:30px;
  background:url("http://placehold.it/30x30") left center no-repeat;
}

li.menu-item-4577 {
  padding-right:30px;
  background:url("http://placehold.it/30x30") right center no-repeat;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    This is going to be a bit long winded but I’m working on a redesign (which you kindly helped me with before :) ). Ive got the menu image code to work in my current design but not in my new design. It’s still a work in progress but just want to get my menu bar finished before I move on to design the sidebar.

    This is all the code I am using to customise at the moment. I’ve added the new bits at the bottom but it doesn’t do anything… I also need the text to fit in the middle of my new banner shape and want to use a different font – although may have to place this as images too. Any idea?

    #masthead img {
	border: none;
}

.category .page-header {
	display: none;
}

#page {
	width: 1050px;
}

#masthead .custom-header-image {
	width: 1000px;
}

#content {
	max-width: 760px;
}

#featured-post {
	margin-left: 92px;
	display: block;
}

#page {
	border: 0;
}

.cat-links {
	display: none !important;
}

.tag-links {
	display: none;
}

#page {
	font-size: 1.03em;
}

.indexed .format-image .entry-summary {
	padding-top: 9px;
}

.entry-header .entry-meta {
	padding-bottom: 9px;
}

img.custom-header-image {
	border-radius: 20px;
}

#secondary .widget-title {
	padding: 0 0 .3075em 7.042253521127%;
}

aside#follow_button_widget-2.widget.widget_follow_button_widget {
	margin-bottom: 2.9517498016357px;
}

div.textwidget {
	line-height: 1.415;
}

#description {
	display: none;
}

#masthead img {
	border: none;
}

.category .page-header {
	display: none;
}

#page {
	width: 1050px;
}

#masthead .custom-header-image {
	width: 1050px;
}

#content {
	max-width: 760px;
}

#featured-post {
	margin-left: 92px;
	display: block;
}

#page {
	border: 0;
}

.cat-links {
	display: none !important;
}

.tag-links {
	display: none;
}

#page {
	font-size: 1em;
}

.indexed .format-image .entry-summary {
	padding-top: 9px;
}

.entry-header .entry-meta {
	padding-bottom: 9px;
}

img.custom-header-image {
	border-radius: 20px;
}

#secondary .widget-title {
	padding: 0 0 .3075em 7.042253521127%;
}

aside#follow_button_widget-2.widget.widget_follow_button_widget {
	margin-bottom: 2.9517498016357px;
}

div.textwidget {
	line-height: 1.415;
}

#description {
	display: none;
}

#page {
  background:transparent;
}

#colophon, #content, #secondary {
  background:#fff;
}

#masthead {
  padding-top:0;
  margin:0;
}

#access {
  border:none;
  background:#B8DCE6;
  padding: 0px 0;
	height:0px;
}

#masthead img {
  display:none;
}

#masthead a.custom-header {
  width:1050px;
  height:300px;
  background-image:url(https://daisychainsanddreamers.files.wordpress.com/2015/01/daisychains-and-dreamers-grey.jpg);
}

#content {
  padding:23px;
  margin-left:0;
}

#secondary {
  margin:0;
  padding:23px;
  width:380px;
}

#secondary .widget {
  padding-left:0;
}
#access {
  margin-top:1em;
  margin-bottom:-1.1em;
}

#main {
  padding-top:2em;
}

#secondary {
  margin-right:0%;
  width:30.5833%;
}

#content {
  margin-left:0%;
}
#content {
  width:671px;
}

#access {
  padding-bottom:0px;
}

#access li {
  background:#B8DCE6;
  margin-top:10px;
  height:23px;
	width: 100px;
}

#menu-item-4572:before, #menu-item-4577:after {
  content:"";
  position:absolute;
  display:block;
  top:0px;
border:21px solid #B8DCE6;
	top: -0.8px;
}

#menu-item-4572:before {
  left:-12.28em;
  border-right-width:0.4em;
  border-left-color:transparent;
}

#menu-item-4577:after {
  right:-12.28em;
  border-left-width:0.4em;
  border-right-color:transparent;
}

#menu-item-4572 {
  padding-left:30px;
  background:url("http://placehold.it/30x30") left center no-repeat;
}

#menu-item-4577 {
  padding-right:30px;
  background:url("http://placehold.it/30x30") right center no-repeat;
}
  • Unknown's avatar
    thesacredpath · Member ·

    I tried @hallluke’s code and got things to work. Give the following a try, which uses a background size to make the the huge image you referenced fit. As he said, you will want to create a new smaller image, something around 35px square, to fit in the menu area, and then remove the background-size declarations from the two rules. 

    li.menu-item-4572 {
    padding-left:30px;
    background:url("https://daisychainsanddreamers.files.wordpress.com/2015/01/daisy-icon-black.jpg") left center no-repeat;
    background-size: 25%;
}

li.menu-item-4577 {
    padding-right:30px;
    background:url("https://daisychainsanddreamers.files.wordpress.com/2015/01/daisy-icon-black.jpg") right center no-repeat;
    background-size: 15%;
}
  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks when added to my new CSS amendments (above) it doesn’t work. It works for my current site. Would you mind trying when combined with my new code?

    Thanks so much

  • Unknown's avatar
    thesacredpath · Member ·

    I worked that out off of http://daisychainsanddreamers.com/ . Can we have a link to the site you are talking about?

  • Unknown's avatar
    designsimply · Member ·

    @daisychainsanddreamers, just checking back in on you to see if you still need help? I can see the daisy icons next to your main menu items, so I think you might be all set.

    I noticed the dropdown menu for categories in the main menu has a funny overlap: https://cloudup.com/cYUOuGDBE6l

    You can fix that by giving the submenu container a little extra padding.

    In your custom CSS, change this:

    #access ul ul {
	background: #B8DCE6;
}

    To this:

    #access ul ul {
	background: #B8DCE6;
	padding-bottom: 2em;
}

    Your blog looks fantastic btw! Love the header image.

  • The topic ‘How to add a linked image in menu bar’ is closed to new replies.