Mobile Responsive – Logo size and order of items

Tagged: mobile

This topic has 10 replies, 2 voices, and was last updated 11 years ago by Wes.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
April 1, 2013 at 3:08 pm #3496
dashinfashion
Customer
Hi Wes,

Loving you theme! I noticed on my iphone that my logo is a bit big for the screen. Is there a way to fix this?

Also, I see that the menu appears above the slider. Is there a way to change the order to put the responsive slider before the menu, or even take out the main menu on the mobile version?

Thanks,

Laura

http://www.dashinfashion.com
April 1, 2013 at 10:26 pm #3499
Wes
Moderator
Take a look at this post for the logo – https://appfinite.com/topic/header-issue-in-mobile-view/#post-3186

For the menu customization, just create a separate thread (since this is a separate topic) and I can help you get it working.
April 2, 2013 at 5:13 am #3505
dashinfashion
Customer
I must be doing something wrong:

1) I tried adding to the css background-size: cover; (I put this in both the partial and full image header definitions)

2) I tried the plugin but it wouldn’t let me set the images

3) I tried to upload a smaller logo image 320 px width but can only upload the default 960 by 80 when going to the header image under appearance.

BTW, what is the correct way to upload the header image?
April 2, 2013 at 6:33 am #3506
dashinfashion
Customer
OK, I think I worked it out by changing the header image size to width: 320px;. That seems to work for the iphone.
April 2, 2013 at 9:01 am #3507
dashinfashion
Customer
Now I see that on some pages the logo isn’t showing up. Any advice? For example on my macair sarafi browser.
April 2, 2013 at 11:30 am #3509
Wes
Moderator
The header is linking to two different logo images. The one that shows up and is working fine links to this – http://www.dashinfashion.com/wp-content/uploads/2013/04/dashin-fashion-designer-kids-magazine-320-b.gif …while the pages that aren’t showing a logo links to this – http://www.dashinfashion.com/wp-content/uploads/2013/04/dashin-fashion-designer-kids-magazine.gif ….which doesn’t appear to be anything.

So you have two separate logos/links somehow. Do you remember where you added the other logo link? In your Genesis Theme Settings? Or Somewhere else?
April 2, 2013 at 11:43 am #3510
dashinfashion
Customer
This might have happened when I tried to use the plugin which didn’t seem to work. I erased the plugin and cleared the cache.

What is the correct way to uplaod a logo with genesis? It seems that in the header you have to upload a file that is 960 by 80. So what I did was upload an image this size. Is this the correct way?
April 2, 2013 at 11:50 am #3511
Wes
Moderator
Yes that is correct, but you can add a different size if you want. First figure out the size of the image you want to upload, then go into your functions.php file and change the header size to the exact size of your image, then upload it to WordPress (as you’ve already done).

Some users upload a smaller image in their css to show when viewed in mobile browsers. You would add something like – background-image: url(your-image-link) !important;

and

background-position: center;
….if you wanted to do that. If the logo you have works fine enough then you can just leave it as it is.
April 2, 2013 at 12:04 pm #3514
dashinfashion
Customer
I can’t seem to even get my website back to the original where I see a logo on each page in safari. I erased the header logo again and uloaded the file again – http://www.dashinfashion.com/wp-content/uploads/2013/04/dashin-fashion-designer-kids-magazine-320-b.gif I see it in the source code but on the macair it doesn’t show up.

I think the problem is the result of the plugin. Any idea how to revert back to normal? What do you see on your side now?
April 2, 2013 at 12:22 pm #3515
dashinfashion
Customer
Ok I check it out again, cleared the cache again. and it seems to work now.

thanks for your patience!
April 2, 2013 at 7:03 pm #3518
Wes
Moderator
You’re Welcome!

BTW, you can add – “background-position: center;” to the #header in your responsive sections of the css and the logo will center on mobile devices…..You don’t have to do this, but I thought I’d post just in case.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.