Archived

This topic is now archived and is closed to further replies.

  • 0

Header Logo - remove padding, center, background color


Question

Posted · Report post

Hello, I need help with the header:

1. Change the color behind my uploaded logo to black

2. Center the logo (I will not be using the area to the right for social media icons)

3. Remove the space/padding around the logo so that it is flush with the top of the screen, the nav bar, and left and right margins -- Actually if I did this, I guess changing the color behind it would be irrelevant because it would take up the entire space.

 

See http://severxance.com/

 

I am trying to get it to look similar to the attached mockup.

 

Thank you.

 

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

UGH.  Thank you for your help but unfortunately I am no programmer.  The best I have come up with for the CSS is the following:  

 

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black;}} which takes care of everything but the margins.

 

I don't understand why the margins aren't 0 (zero) -- flush to the edge of the header area.  I have also tried adding in padding: none and padding: 0 ... as so:

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black; padding: 0;}}

 

I am assuming that there is just some snippet missing in the line of code above to remove all padding from the header image.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, when you format your css you'll need to do it in the following format (using the above code you posted as an example)

#branding .mainlogo-link, .mainlogo-img {margin:0 auto; float:none; background-color: black; padding: 0;}

The padding you have left on the page is coming from the content-pad inside the branding area. 

 

http://screencast.com/t/QWvrscxA5j

 

So if you look at the screenshot above, you'll see id on the left in the html, and the css on the right relating to the padding. So in order to remove that you'd write the css as below

.section-branding .content-pad {padding:0;}

Share this post


Link to post
Share on other sites

Posted · Report post

Hallaleujah!  It worked.  THANK YOU!  :)

 

Now, can you help me with the navigation bar: changing it to a custom image (repeatable) that goes full width (out to the very edges of the screen)?

 

I really appreciate your help.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

I would advise using the background-image css command - http://www.w3schools.com/cssref/pr_background-image.asp and applying it to the #navbar container which will go right to the edge of the screen, and to the .content-pad otherwise you'll find your page canvas color will show over the top of the navbar background. You'd apply an image as a background in the format of

#navbar {background:url(your full url goes here);}

However you'll have the existing nav bar colors are showing still as they're applied to another class called - .navbar.pl-color-black-trans on top of the navbar container.

 

You'll need to set the background-image in that class to :none; so only your custom background image displays.

 

The end result will be something like http://screencast.com/t/J4pcDKBgEcFa

 

Unfortunately we're not able to provide css code directly for making css customizations, we can only point you to relevant resources so you can learn the required skills to find/edit the code etc.

Share this post


Link to post
Share on other sites

Posted · Report post

Yes!  That example you gave is exactly the sort of thing I am trying to do.

Share this post


Link to post
Share on other sites

Posted · Report post

OK, I am getting somewhere.  I got the nav bar graphic image to show and go full width and I even centered the menu items.  But I still can't figure out how to get the default black nav bar and background behind it to go away.  I don't know how to edit the Classes or which Class file to choose.

 

Here's my site: www.severxance.com

 

Here's my CSS:

 

 

#branding {.mainlogo-link, .mainlogo-img{margin:0 auto; float:none; background-color: black;}}
.section-branding .content-pad {padding:0;}
/* Centered Navigation */
#page {
  #navbar,
  #nav{
    .navline,
    .main-nav{
      float:none;
      text-align: center;
      li {
    display:inline-block;
        float:none;
        text-align:center;
      a {
        float:none;
        text-align:center;
      }
      }
    }
    .dropdown-menu {
        text-align:left;
    }
  } 
}
/* Centered Navigation Media Query*/
@media(max-width:767px){
body.pagelines {
  #page {
     #navbar {
        .navline {
          float:none;
          text-align:left;
          li,a {
            display: block;
            float: none;
            text-align: left;
          }
        }
      }
    }
  }  
}

 

What you said about the existing nav bar makes sense but can you tell me which Class file to edit?  I thought maybe it was class.css but I am lost again.

 

Thank you again.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Custom CSS isn't 'nested' as you've done.  This causes the code to break and become ineffective.

 

Within the curly brackets of a CSS tag, you need to include only those elements that are to be changed, as well as any others within the tag that may not be changed now, but perhaps in future.

 

So, this is correct:

#nav .navline, .main-nav{      float:none;
      text-align: center;
      }
This is not:
#nav{    .navline,
    .main-nav{
      float:none;
      text-align: center;
      li {

As you can see, it's both nesting, and, it fails to close the operands, so the browser doesn't have any idea where one thing begins, and the other ends.

 

I'd suggest you spend some time looking over examples found here: http://www.w3schools.com/css/

 

When you craft some CSS, before implementation, try using the By direct input tab here: http://jigsaw.w3.org/css-validator/  It will make sure your code is correct before you implement. Additionally, it will guide you to fix errors.

 

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, I am just going to hire someone at this point.

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, I hope to talk with someone at tunatraffic.com tomorrow.  Thanks.  :)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

In order to change the color of the container behind your logo, center the logo and make adjustments to the padding, you'll need to use custom css.

 

If you've not used css before, check out our guide and overview here - http://support.pagelines.me/docs/customization/custom-css/ which advises on the tools we suggest you use to find and edit the various css selectors.

 

There's also a plugin called Sexy Snips which has some general css snippets inside you can copy-paste. www.pagelines.com/store/plugins/sexy-snips/

 

Your custom css can be pasted in to Pagelines>site options>custom code. This will override the default styles.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks.  Sexy Snips worked for the centering of the logo.  Still trying to figure out how to either make it fit into the entire space or make the background blank.  

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Glad that worked for you. To get the background image full width you'll need to remove the padding in the .content-pad for the branding section, then set the width for the image to 100%.

 

Look for the class .section-branding in firebug, you'll see an area in the css for the image where can adjust the width. Also within the branding section you'll see a class for .content-pad.

 

http://screencast.com/t/o1G20cq1aY

Share this post


Link to post
Share on other sites