Forum Support

Shape 5
March 28, 2024, 09:30:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Logo Auto Resize  (Read 1463 times)
udgny
Jr. Member
**
Offline Offline

Posts: 2



« on: July 06, 2016, 10:35:14 AM »

When scrolling down, I'd like the logo to automatically resize to fit completely in the menu. I thought there was a logo_small suffix but that doesn't seem to work. Can anyone help me with this auto resize code?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: July 06, 2016, 04:19:57 PM »

Hello,

There's nothing that will make the logo resize only on scroll, do you mean when you scale the window down in width instead? Please also provide a url to your site.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
udgny
Jr. Member
**
Offline Offline

Posts: 2



« Reply #2 on: July 07, 2016, 03:36:00 PM »

http://109.199.102.38/~sunrisemanor

Thanks
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: July 08, 2016, 09:23:33 AM »

Hello,

Your logo is very tall, the template won't be default change that. Adding the following to custom.css would resize it though:

#s5_menu_wrap.s5_wrap #s5_logo_wrap, #s5_menu_wrap.s5_wrap_fmfullwidth #s5_logo_wrap {
max-width:86px !important;
margin:0px !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
miactive
Jr. Member
**
Offline Offline

Posts: 30



« Reply #4 on: July 12, 2016, 03:15:25 PM »

Hello,

Your logo is very tall, the template won't be default change that. Adding the following to custom.css would resize it though:

#s5_menu_wrap.s5_wrap #s5_logo_wrap, #s5_menu_wrap.s5_wrap_fmfullwidth #s5_logo_wrap {
max-width:86px !important;
margin:0px !important;
}

Where would we add that code?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: July 12, 2016, 05:45:26 PM »

Hello,

You would add it to custom.css in the template's css folder.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
miactive
Jr. Member
**
Offline Offline

Posts: 30



« Reply #6 on: August 05, 2016, 05:02:12 PM »

Instead of scaling, is there a way to add a different logo, or show only a certain area of the logo? The logo I'm stuck with is very blocky, so when it is scaled, it is unreadable.

Also, it aligns to the top, rather than centered, can I use a tag to center it?
« Last Edit: August 05, 2016, 05:05:47 PM by miactive » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #7 on: August 06, 2016, 08:29:03 AM »

Hello,

Something like that would require custom programming, we don't provide those kinds of services as part of our support. You would basically need to create another logo div on the index.php file and hide/show each logo at specific screen widths with custom css media queries.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mktgape
Jr. Member
**
Offline Offline

Posts: 15



« Reply #8 on: August 12, 2017, 02:05:02 PM »

Mike:  where does the scroll height come from?  Couldn't that attribute be modified to accommodate larger logos?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #9 on: August 14, 2017, 07:05:59 AM »

Hello,

That's controlled in template.css under:

#s5_menu_wrap.s5_wrap #s5_menu_wrap2, #s5_menu_wrap.s5_wrap_fmfullwidth #s5_menu_wrap2

You could create custom css that shrinks the logo on scroll, but the request above was to replace it with entirely different logo.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.