Solved

Styling the background color of a menu bar

Posted on 2014-03-08
7
337 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
  • 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

809 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