I need some help with custom navbar and header image

[vdesjardins]

Hello,

I need help for 2 things but I can't open 2 different topics as they're related. Let me explain you what I did: first I installed Genesis and the lifestyle child theme.

I wanted to have a custom header (I thought the default image was too small) so I googled and found this page:
http://www.geoffreyrickaby.com/web-development/create-a-custom-header-in-genesis

I followed the instructions and got my custom header image:
http://www.clubwebmarketing.com
It looks great on desktop and mobile, but I was wondering: is it possible to have a different (smaller) image for tablets and mobile phone ? Because this image is 960 pixels wide, and I think it may be too heavy to display on a mobile phone. For mobile, a smaller header image would be great, but I don't know how to do that. I know it's in the css but what is the css rules that I have to insert to have different images for desktop, tablet and iphone ? What about my html/php header code ?

I tried some stuff but it wasn't ok, that's why I'm asking for some help.

The other question that I have, and that's more important, is that I want to have a custom navbar. I'd like the primary navbar to be the same size as the header image.

I succeeded in doing that with this css:

.lifestyle-pro-greybluepink .site-container {
padding: 36px 90px 36px 90px;
}
.lifestyle-pro-greybluepink .content {
width: 650px;
}
.lifestyle-pro-greybluepink .sidebar-primary {
width: 305px;
}
.lifestyle-pro-greybluepink .home-bottom-left,
.lifestyle-pro-greybluepink .home-bottom-right {
width: 320px;
}
.lifestyle-pro-greybluepink .footer-widgets-1,
.lifestyle-pro-greybluepink .footer-widgets-2,
.lifestyle-pro-greybluepink .footer-widgets-3 {
width: 320px;
}
.lifestyle-pro-greybluepink .footer-widgets-1 {
margin-right: 10px;
}

I made the changes inside the greybluepink section (this is the name of the custom colour theme I created).

It was working fine and my site looked quite good.

Then I decided to check how it looked on iphone and ipad and... it was awfull !!!

I tried to make some changes into the css part for mobile, but I couldn't do anything good.

That's why I'm contacting you. Could you please help me and tell me how I can have this primary navigation bar the same width as my header image, and that it looks good on desktop as well as on mobile ?

I know that all these things are possible and not so complicated, but I just don't know how to do, and I hope you'll be able to help me.

Thanks a lot.

Veran

[Jami Howard Mays]

The tutorial you linked to is pretty old (November 2012). The issues you're having may be traced back to it, though I haven't used that tutorial personally so I'm not sure.

A better tutorial, and one that I've tried, is Jessica Barnard's http://thepixelista.com/responsive-genesis-child-theme-logo/

I looked at your site on mobile and I'm not seeing where it looks awful. Can you be more specific?

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[davidd]

Thank you Jami. Jessica Barnard's solution totally worked for my needs.
-David

[vdesjardins]

Thank you Jami, the tutorial helped me too.
If you weren't able to see how my site was ugly, it's because I removed the css code I had added.

So now I followed the tutorial and everything is ok regarding the header image, except one thing: my blog title appears on top of the header image.

Any idea of what I should do ?

The other thing that I will want to do is to reduce the primary navbar width. That's what I was trying to do earlier, and as I said, the result wasn't good at all. Actually, it looked good on desktop, but awful on mobile, so I removed all the css I had added.

I'm going to see if I can find a way to do that.

[Author]

Posts