Modify header on Split theme


(Andrea) #1

Hi,
I need your help. I’m using the theme Split, I would like to use my personal banner I already have 960x150.
I use the css code for put it into the site, I put in into resources.
Now I can see my banner but it’s too large, and especially too high. I think I need a code for select the header size by css code. Also, browsing the site on mobile device, I noticed the header wasn’t responsible, the text on the page yes, the header no. I need an header responsible. Please help me.
Thank you very much.


(Doug Bennett) #2

A URL to your site would help people give you a hand. Also maybe a screen shot of what custom CSS you have tried.


(Andrea) #3

www.ericclapton.it/index.html
I cannot see the jpg on home page, why?
Thank you


(Doug Bennett) #4

Don’t know what you are expecting to see, but this is what I see:


(Doug Bennett) #5

The split them adjust the size of the banner area based on screen width breakpoints. How large at what screen size do you want to make it?

Would like a look at the CSS code you used please.


(Andrea) #6
  • On my header, there are 3 photos on the left and 3 photos on the right.
    In your page isn’t displayed in its entire size.
  • The “Links” section on the menu appear in the 2nd line…
    -Why I can’t see the photos I’ve put in the homepage?

I use this css code:

#intro #intro-background {
background: url(%resource(banner2new.png)%) no-repeat center center;
background-size: cover;
}

#headerImage { background-image: url(%resource(banner2new.png)%); }


(Doug Bennett) #7

Try changing the first CSS to this:

#intro #intro-background {
    background: url(/resources/banner2new.png);
    background-size: 100% 100%;
}

That should get your 3 pictures back.

As for the links going to the 2nd line you have too many characters in the page names. You would need to reduce the number of pages or shorten the names.

Don’t know how or where you put this photos.


(Andrea) #8

The css code works! Thank you!
So, now remains two little problems to solve.

  1. Is there a code for make the header less height?
  2. I put the photos in the home page with drag and drop way, of copy, paste.
    I can see them in preview but not in the published site.

(Doug Bennett) #9

for changing the intro size (the picture try this

/*This is for largest break point was hieght 300px margin-top 0*/
@media only screen and (min-width: 1170px) {
  #intro {
      height: 200px;
      margin-top: 70px;
  }
}
/*This is for Mid break point was hieght 200px margin-top 70px*/
@media only screen and (min-width: 768px) {
  #intro {
      height: 150px;
      margin-top: 85px;
  }
}
/*This is for smallest size was hieght 150px margin-top 50px*/
/*Note I did not change this you may want to */
#intro {
  height: 150px;
  margin-top: 50px;
}

You may play with the values.

As for you pictures your getting errors (403 Forbidden) check your URL’s

If you still have problems this might help:


(Andrea) #10

Thank you!
Is there a code to play with the margin-bottom? I try to use a similar code with margin-bottom but he doesn’t change.


(Doug Bennett) #11

What are you trying to do with the margin on the bottom. Margins don’t always work the way you would think they should. Top and bottom margins can collapse from one element to another.
Best to tell what you want to achieve.


(Andrea) #12

I would live to move up a little the bottom margin.


(Doug Bennett) #13

What your arrow is pointing at is part of the secondary navigation and has no margins set. It does have a line-height and height set.

.secondary-nav ul ul {
   line-height: 48px!important;
  height: 48px;
}