Header Logo - remove padding, center, background color

[severxance 0]

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.

 

[James B 436]

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.

[severxance 0]

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.  

[James B 436]

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

[severxance 0]

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.

[James B 436]

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;}

[severxance 0]

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.

[James B 436]

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.

[severxance 0]

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

[severxance 0]

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;}

#navbar {background:url ('http://severxance.com/wp-content/uploads/2013/04/stonenavbar.jpg');}

/* 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.

[Rob 547]

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.

 

 

 

[severxance 0]

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

[Rob 547]

These might help.

 

http://www.pagelines.com/pros or  http://www.odesk.com

[severxance 0]

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