Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Styling the background color of a menu bar

Posted on 2014-03-08
7
Medium Priority
?
345 Views
Last Modified: 2014-03-08
I would like to change the background color of the menu bar at www.mauivacationrental.com, such that the buttons remain aqua, but the space around the buttons uses the background image which is common to the rest of the page.  I've uploaded the style sheets which I believe are relevant.p7affinity-1-01.cssglobal-css.css
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39914916
Currently your background is set to the same background as the rest of your page and your buttons turn aqua on hover and when they're active. Not sure exactly what you need.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39914919
Add to .p7DMM01 ul a {}
background: url("../images/background.jpg");

To .top-navigation{} and .columns-wrapper, .menu-top-wrapper {} add
background-color:#487799;


Hmm, me thinks the question changed.
0
 

Author Comment

by:ddantes
ID: 39914936
My apologies.  I neglected to upload a revised style sheet before posting the question.  Please have another look.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39914955
OK - you've set the colour in 2 different CSS files.

p7affinity-1_01.css - line 137:
.menu-top-wrapper .p7DMM01 {
    background-color: #00FFFF; <-- remove this
    ...
}

p7DMM01.css - line 10:
.p7DMM01 {
    background-color: #7BA4C1; <- remove this
    ...
}
0
 

Author Comment

by:ddantes
ID: 39915014
OK -- we're almost there.  With those two changes, the buttons are transparent, except they change to dark blue on hover.  I'd like the buttons to be aqua, and change to dark blue on hover.  But I don't want the entire menu bar to be colored -- just the buttons.  Is that possible?
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 39915033
Sure. Line 44 of p7DMM01.css sets up the buttons. Just add a background-color property to it:

.p7DMM01 ul a {
     background-color: aqua;
     ...
}

Open in new window

0
 

Author Comment

by:ddantes
ID: 39915198
Perfect.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question