Cafe Pro Responsive Menu : Replace Site Title with Logo

[Skysage]

Hi,
I'm customizing the demo theme locally.
And I'm trying to change the primary responsive menu from text to my company logo.
You see this in the top left hand corner of the menu once you scroll past the first page.
In this demo, it displays the site title which is in this case "cafe Pro". What I'd like it to diplay is a picture of my company logo that is responsive. Is there a way to replace this site title with an image?

When I look on the code, this is what comes up :

<ul id="menu-primary-navigation" class="menu genesis-nav-menu menu-primary responsive-menu"><li class="small-site-title">Café Pro

I want to change the Cafe Pro text there with an image.

Can you help me?

Tell me what I need to change to implement this.

Thanks.

http://demo.studiopress.com/cafe/

[Christoph]

You can try this tutorial:
http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Skysage]

Thanks for your help Christoph. I'lkl try this and see if it works.

[Skysage]

I got it solved.

I used firebug to find the class that had the site title in the menu and then I added a background image specifying my logo.

I also got help by looking at a site that had a layout like how I wanted it.

Here is the code I changed in style.css

.nav-primary .small-site-title {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition:    all 0.5s ease-in-out;
	-ms-transition:     all 0.5s ease-in-out;
	-o-transition:      all 0.5s ease-in-out;
	transition:         all 0.5s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: #fff;
  background-image: url("http://www.website.com/wp-content/uploads/2015/04/logo.png");
}

[cindyjw]

I did what you said, Skysage, but I still have the title text showing on top of my logo image. How do I remove that?

http://gudlandscaping.com/access

Thanks!

[Author]

Posts