Forum Support

Shape 5
March 29, 2024, 05:16:18 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: Resize Logo and Menu  (Read 568 times)
coffejor
Jr. Member
**
Offline Offline

Posts: 17



« on: January 13, 2015, 11:33:46 PM »

Hello,

First of all, I love the Risen Hope template; thank you for all of your great work!

I have read all of the forum topics and I can't seem to find and answer: I have a custom HTML module published to the logo position and it seems to be fixed at a width of 398px. I thought this width was set via CSS in other Shape 5 templates, but I have reviewed the template.css file as well as the index.php file and I can't find where this is defined. I would prefer the logo to be 655px and the menu to be take up the remaining topbar width (the max site width is the default 1300px).

Additionally, I would like the menu to begin resizing when it comes into contact with the logo area (e.g., when the screen size drops below the combined logo and menu width).

My development site is available at http://semncap.jordancoffey.com/. Thank you in advance for any and all help!

-Jordan
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: January 15, 2015, 05:49:35 PM »

Hello,

Generally the logo isn't designed to be that wide. You also don't want to use a fixed pixel value on the position or it won't scale responsively. You might be able to specify a % width on the element itself such as this so it can scale:

Code:
Template.CSS - Line 371

#s5_logo, #s5_logo_module {
    color: #ffffff;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 60%;
}
Logged

Mike Nicoll
------------
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
coffejor
Jr. Member
**
Offline Offline

Posts: 17



« Reply #2 on: January 16, 2015, 02:06:40 PM »

Thanks Mike, that worked perfectly. And you're absolutely right: a relative approach is much better to preserve full responsive functionality.

All of your hard work and dedication is greatly appreciated!

-Jordan
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: January 18, 2015, 10:05:17 PM »

Awesome. Glad you got it sorted Smiley
Logged

Mike Nicoll
------------
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
adelekepc
Jr. Member
**
Offline Offline

Posts: 11



« Reply #4 on: January 19, 2015, 04:34:23 AM »

Please, how can i resize the wrapper holding the logo and the menu, it becomes bigger when you scroll down thus covering a lot of information
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: January 19, 2015, 11:38:44 PM »

Hello,

Can you be more specific? The floating header by default should be smaller when scrolling down. Which area are you trying to reduce?
Logged

Mike Nicoll
------------
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
adelekepc
Jr. Member
**
Offline Offline

Posts: 11



« Reply #6 on: January 19, 2015, 11:55:15 PM »

Yes, am talking about the floating header

You know when you scroll down, the logo. Menu containers wraps everything and make it float
But, it's looking big, so am asking which css container is controlling that, maybe the margin top and bottom needs to be reduced
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: January 19, 2015, 11:59:47 PM »

Hello,

The Floating Menu options can be adjusted in the Template Manager under Template Specific but there are no default options for the height adjustment. You can make those changes here:

Code:
Template.CSS - Line 426

.s5_floating_header #s5_header_wrap {
    height: 60px;
}
Logged

Mike Nicoll
------------
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.