Rowby Goren
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.
Also the solution must be responsive from desktop to cell phone :)
Thanks for any help!
Rowby
mockup-image.png
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.
Also the solution must be responsive from desktop to cell phone :)
Thanks for any help!
Rowby
mockup-image.png
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;
}
#navbg {
width: 100%;
background: #1e4b87;
}
#nav {
max-width: 1067px;
margin-right: auto;
margin-left:auto;
}
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
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
ASKER
Hi Prasadh,
Perfect!
Unless you have additional comments, I'm ready to award you the points.
Best!
Rowby
Perfect!
Unless you have additional comments, I'm ready to award you the points.
Best!
Rowby
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks!
Awarding points now!
Rowby
Awarding points now!
Rowby
ASKER
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,
Rowby
ASKER
Thanks. Had trouble adding the points. Rowby
All of your page html divs are inside a Wrapper and then inside a DIV with class "container-fluid inner ui-sortable"
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