Solved

Styling the background color of a menu bar

Posted on 2014-03-08
7
331 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Phone Dialer 5 60
CSS help matching specific span class 2 39
media queries min-width in bootstrap not being read properly 14 47
Problem with a CSS in a page 2 25
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

919 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now