Reduce width of header CSS

Currently, my header is displaying 100% width.  I want to be able to get it to 75% width so you can see the edges of the header.

This is the mockup i'm trying to achieve.

recreate this header
I've tried for ages messing with the css but cannot get a transparent background.  

Help me please,
Jon ImmsWeb DeveloperAsked:
Who is Participating?
 
Juana VillaFront-end DeveloperCommented:
Hello Jon,

Looking at your website, I will do the following:

1. I will create some space at the bottom of "#header_meta" in order to move up the "#header_main" up

#top #header_meta {
    padding-bottom: 80px;
}

#header_main {
    z-index: 10; /*updated from 1 to 10*/
    margin-top: -70px;
}

Open in new window


2. About the transparent stuff: These are the elements who need a transparent background.

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 112px; /*changed from 168 to 112 */
}
.header_color .header_bg,
#main.all_colors{
    background: transparent; /*override a white background*/
}

Open in new window


I hope this helped you,
Juana
3
 
David KellyWeb developerCommented:
Do you have a link to the page?

It's nearly impossible to answer a question like this with no HTML/CSS to view or a link to the page.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Oops sorry, forgot to add the link Website link
1
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Qian BaoDigital Media Specialist and Web DesignerCommented:
Your header is controlled by "container_wrap container_wrap_logo". Try adjusting its padding and margin, as well as height and width. Check to make sure whether the white spaces on either side of the header are supposed to be there. You can't achieve a transparent effect when your header taking up blank spaces with white spaces.
0
 
Peter HartCommented:
Its the design.
I don't think the header is  "on top" of the image of trucks
you can see when you scroll the page down the  Header shrinks down and stays there while everything else scrolls over the image.

it may be a setting in the theme's customise section about a sticky header. amd it probably generates its own css file.
if you stop the background being white then the page further down looks wrong and the header still has a white background
0
 
gobinath rajuCommented:
.container {
width: 75%;
}
0
 
Jon ImmsWeb DeveloperAuthor Commented:
fantastic, thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.