Solved

Styling the background color of a menu bar

Posted on 2014-03-08
7
339 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 43

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
Independent Software Vendors: 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!

 
LVL 43

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 43

Accepted Solution

by:
Chris Stanyon earned 250 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

691 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