redirect logo site to a different url address

• 

  cnpsymposium2015 · Member · Feb 23, 2015 at 2:06 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to give a different url to the logo in a site for an event. The logo will have the url of the organisation that prepare the event and to the homepage of the site (as is by default).

  One of your programmers suggested to insert the logo as a costume link in the menu. For the last couple of days I am trying to do it, but I cannot complete it by myself. I need help.

  I created the logo as the menu page, so it should be the first menue item from the right, but it is an image, and the image doesn’t fully appeared in the menu. I scaled the image to be smaller, but if it possible i would like it to be larger then the other items. I also designed the image of the icon so there will be a big white space to its left so there will be a big space between the logo and the other items in the menu. I could complete this also.

  I will really appreciate your help here with the css, as soon as possible. I am using the super hero theme.

  Thanks
  Shira Lottem. Graphic Design, Champalimaud Foundation.

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

• 

  thesacredpath · Member · Feb 23, 2015 at 9:29 pm

  • Copy link

  Hi there, let’s start with the following changes to what you have now. In your .menu-item-688 a rule, change the background position to
  left center
  and you can remove the
  text-align: left;
  declaration.

  See what you think with the above changes.

• 

  cnpsymposium2015 · Member · Feb 24, 2015 at 9:59 am

  • Copy link

  Thank you, it looks better now.

  I would also like to the logo to be larger then the other menu’s items, so it will be more noticeable. Is it possible?

  Thanks
  Shira

• 

  thesacredpath · Member · Feb 25, 2015 at 9:43 pm

  • Copy link

  That’s awesome. Right now your image is 150px x 25px. You will need to create another one at the size you want, and then replace the URL in the background declaration with that new URL. It looks like you could go 175px wide on the image. The following is based on that width.

  .menu-item-688 a {
      background-image: url("https://cnpsymposium2015.files.wordpress.com/2015/02/logo.png");
      background-position: left top;
      background-repeat: no-repeat;
      padding-left: 0;
      text-align: left;
      text-indent: -9999px;
      height: 30px;
      width: 175px;
  }

  If you change our what you have with this, and then add the new image URL, there might be a bit of adjustment needed to position it just as you want it, but again, let’s see how this works for you.

• 

  cnpsymposium2015 · Member · Mar 3, 2015 at 11:02 am

  • Copy link

  Thanks again for your help, it looks great..

  Now I would like to move the logo more to the left, so it will be vertically aligned with the grid (imaginary) of the page. I tried to change the position without grabbing all the other items of the menu but couldn’t..

  I’d appreciate your help again..

  Thanks
  Shira

• 

  thesacredpath · Member · Mar 3, 2015 at 5:34 pm

  • Copy link

  You have widened your content area, so let’s widen the navigation to that same width with the following.

  #masthead {
      width: 1200px;
  }

  See what you think with that.

• 

  cnpsymposium2015 · Member · Mar 12, 2015 at 9:31 am

  • Copy link

  yes! thank you very much, it looks very nice.

• 

  thesacredpath · Member · Mar 12, 2015 at 3:40 pm

  • Copy link

  You are welcome.