Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 349
  • Last Modified:

Styling the background color of a menu bar

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
ddantes
Asked:
ddantes
  • 3
  • 3
1 Solution
 
Chris StanyonCommented:
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
 
GaryCommented:
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
 
ddantesAuthor Commented:
My apologies.  I neglected to upload a revised style sheet before posting the question.  Please have another look.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Chris StanyonCommented:
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
 
ddantesAuthor Commented:
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
 
Chris StanyonCommented:
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
 
ddantesAuthor Commented:
Perfect.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now