Link to home
Start Free TrialLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

adding a responsive background color to the top half of a web page

Hello Css experts:

Please look at this development site:  website

In the top area is a dark blue  #1e4b87.   I would like the dark blue to stretch across both right and left of the blue area.

Like in this mockup.  
User generated image
Also the solution must be responsive from desktop to cell phone :)

Thanks for any help!

Rowby
mockup-image.png
Avatar of Prasadh Baapaat
Prasadh Baapaat
Flag of India image

Hello,
All of your page html divs are inside a Wrapper and then inside a DIV with class "container-fluid inner ui-sortable"

.container-fluid {
    max-width: 1067px;
}

Open in new window


above CSS is limiting your nav to max width 1067px.

The NAV part you want to span whole page.... so basically move #nav out of the container, and place it inside a new div like with ID "navbg" below wrapper div, give it a background color of blue #1e4b87 and width of 100%

give #nav a max-width of 1067px to match other elements..

I hope this should sort the problem...

I also suggest you take a look at your overall code, it can be optimized ... you are using bootstrap 2x... you can redo the code and use bootstrap 3x (3.3.6 is latest) like an upgrade.

let me know if this works.
Prasadh
give #nav a max-width of 1067px to match other elements... use below code ...

#navbg {
     width: 100%;
     background: #1e4b87;
}

#nav {
     max-width: 1067px;
     margin-right: auto;
     margin-left:auto;
}
Avatar of Rowby Goren

ASKER

Hi. Prasadh,

Thanks!  That sounds like the way to go.  

For now I'm stuck with bootstrap 2.x -- it's using a content management system that won't suppor 3 until hopefully it's next major revision

I'll let you know when I do the fix this weekend
Hi Prasadh,  

Perfect!

Unless you have additional comments, I'm ready to award you the points.

Best!
Rowby
ASKER CERTIFIED SOLUTION
Avatar of Prasadh Baapaat
Prasadh Baapaat
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks!  

Awarding points now!

Rowby
Moderator -- I am trying to award Prasadh the points, and gave him Best Solution -- but I don't see any button to actually complete the award process?

Thanks,
Rowby
Thanks.  Had trouble adding the points.   Rowby