Forum Support

Shape 5
March 18, 2024, 10:06:41 PM *
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: Drop down broken after centering logo in traction  (Read 763 times)
don5420
Jr. Member
**
Offline Offline

Posts: 18



« on: July 30, 2013, 12:40:14 PM »

I have changed the template.css file. Under the heading BODY ELEMENTS, I changed the s5_logo, s5_logo_module, and s5_logo_wrap to "float: center" instead of "float: left".  This has centered my logo, which is what I was wanting.  However, it has now made the drop down panel sit about 20px down from the top of the site.  Can you please tell me how I can fix this?

Thanks!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: July 30, 2013, 09:28:29 PM »

Hello,

I would need to see a URL but instead of changing the float just try adding a margin-left to the logo.

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

Posts: 18



« Reply #2 on: July 30, 2013, 10:11:54 PM »

The site is http://abca.us

I will enable the drop down panel so you can see it.

I need the logo to be centered on the page.  What would the margin-left do if I added it to the logo?  And where would I add it?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: July 30, 2013, 10:20:37 PM »

Hello,

Can you revert the changes you made and I will give you the proper code to center your logo without interfering with other elements.

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

Posts: 18



« Reply #4 on: July 31, 2013, 10:14:39 AM »

The changes have been reverted.  Something else that was nice about the centered logo, was that it would auto resize when the page was resized.  With the logo set to "float: left", the logo stays the same size.

Will the code that you give me allow the logo to resize dynamically?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: July 31, 2013, 09:43:29 PM »

Hello,

The template wasn't really designed for that large a logo so there wasn't any responsive settings tied to it. If you add the following code to the s5_responsive.css file it will rescale your logo at varying resolutions accordingly:

Code:
@media screen and (max-width: 1050px) {
  #s5_social_bar { display: none; }

  @media screen and (max-width: 1050px) {
  #s5_logo_module { width: 75%; }
}
  @media screen and (max-width: 750px) {
  #s5_logo_module { width: 50%; }
}
  @media screen and (max-width: 550px) {
  #s5_logo_module { width: 35%; }
}
}

@media screen and (max-width: 450px) {
  #s5_logo_module { width: 20%; }
}

In the other case I would set it back to float in the middle as you did before since using a margin in this case will require too much tweaking with responsive settings. The code above will dynamically resize your logo and you can tweak the settings as necessary.

You can also change the position of the button at the top of your site by targetting the following with a !important call.

#s5_drop_down_button {

-Mike


« Last Edit: July 31, 2013, 09:46:51 PM by mikenicoll » 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
don5420
Jr. Member
**
Offline Offline

Posts: 18



« Reply #6 on: August 01, 2013, 09:43:00 AM »

The responsive settings that you gave me would be incredibly difficult to make it look good by tweaking those settings (as you mentioned).

If the "#s5_drop_down_button {" that you refer to is located in the template.css file, then it already has an !important call.  Can you tell me what file I should be looking in?  And maybe some more details about what the !important call does?

Thanks!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: August 02, 2013, 02:06:20 PM »

Hello,

What !important does is sets the priority and overrides any existing calls. I took a look at your site again and all you need to do to fix that container offset is add the following to the custom.css file.

#s5_drop_down_container {
     margin-top: -20px;
}

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

Posts: 18



« Reply #8 on: August 06, 2013, 12:01:32 PM »

Thanks!  Worked like a charm.

On that same note, should I be adding all of my changes to the custom.css file instead of the template.css file?  And if so, do I just change the part I am looking for or do I need the whole statement?  For example the code in template.css is:

#s5_logo_wrap {
margin-top:20px;
float:left;
margin-bottom:16px;
}

And all I want to change is the "float" to middle. Would that mean I can just put the following in the custom.css file?

#s5_logo_wrap{
flat:middle;
}

Or do I need all of the statement with my changes in it?

Thanks again!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: August 07, 2013, 04:49:05 AM »

Hello,

You should definitely make all your changes in the custom.css file as it allows you to keep track of any modifications you have made apart from the stock settings much easier. You do not need to use the full coding block you just need to add the coding required such as:

#s5_logo_wrap {
margin-top:20px;}

The float and bottom margins aren't needed here as they are already being read by the Template.CSS file. This is just for your additions which you can keep minimal by using the structure above. If it is easier for you then you can just modify the Template.CSS directly but doing it the other way makes it so if you ever update the Template you have all your modifications right there.

-Mike
« Last Edit: August 07, 2013, 04:50:36 AM by mikenicoll » 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.