|
#1
Feb 27, 2017, 04:01 PM
|
|
Hi,
I'm wondering if something is overriding the sub-menu CSS I'm inserting on this site http://www.friendsindeedpas.org/fid
Per another thread here I've inserted:
.sub-menu {
position: relative;
top: 70px !important;
}
.sub-menu li {
background: #f2adae !important;
width: 100% !important;
}
(These aren't the values that I want but I just copied the code to get the ball rolling).
No adjustments that I make to the above code seem to effect the sub menu at all (under the first two menu items on this page "WHO WE ARE" and "WHAT WE DO".
Is there some kind of setting in place which is overriding this code?
(Bonus points for the right code to adjust the background color of the current sub-menu item.)
Thanks!
R
|
#2
Feb 27, 2017, 04:22 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
So where did you put that CSS?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Feb 27, 2017, 04:26 PM
|
|
Quote:
Originally Posted by juggledad
So where did you put that CSS?
|
ATO Options / Add Html/CSS Inserts / CSS Inserts
|
#4
Feb 27, 2017, 05:30 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Where in that section? top or bottom?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Feb 27, 2017, 05:32 PM
|
|
Quote:
Originally Posted by rickpoet
ATO Options / Add Html/CSS Inserts / CSS Inserts
|
In "CSS Inserts" which only has one box, unlike the HTML inserts which have "top" or "bottom" etc.
|
#6
Feb 27, 2017, 07:13 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Try moving that CSS to the top of that box
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Feb 27, 2017, 07:46 PM
|
|
OK moving the code to the top of the box worked. Thanks!
As long as I have your attention, having trouble figuring the selector to position the second submenu level (grandchild).
This is what I have in place no to work with the first sub menu:
.sub-menu {
position: relative;
top: 30px !important;
}
/* add formatting to submenu items */
div#menu1 ul.rMenu li ul.rMenu-ver li a {
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px!important;
}
Last edited by rickpoet; Feb 27, 2017 at 07:49 PM.
|
#8
Feb 27, 2017, 08:19 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Have you looked at the menu items using a code examiner like FireBug in FireFox?
What does it show has the highest precedence for the elements in question?
p.s. I hope you realize your CSS would work at the bbottom of the option, but you had an error in your CSS above the CSS you were adding. You were missing a closing '}' which invalidated the following CSS.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#9
Feb 27, 2017, 08:23 PM
|
|
I didn't realize that, thanks for catching it!
I appreciate the "teach a man to fish..." approach but I'm finding it a little confusing...I'm wondering of there's a "sub-menu" selector which applies specifically to the second level menu?
|
#10
Feb 27, 2017, 08:27 PM
|
|
Actually I think that was just a cut and paste error when posting into the forum...there isn't a missing closing } in what I'm looking at.
|
#11
Feb 28, 2017, 08:39 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You had embedded that CSS inside teh {} of some other CSS that is why it wasn't working originally. When you moved it to the top, you fixed that error.
Again: Have you looked at the menu items using a code examiner like FireBug in FireFox?
What does it show has the highest precedence for the elements in question?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#12
Feb 28, 2017, 11:20 AM
|
|
Quote:
Originally Posted by juggledad
Again: Have you looked at the menu items using a code examiner like FireBug in FireFox?
What does it show has the highest precedence for the elements in question?
|
I appreciate you pointing me to the code, I have looked at the code in a browser and I'm having a hard time identifying what applies to the 2nd level of the sub-menu.
I saw in another thread you had given the code ".sub-menu" which seemed to work to apply specifically to the first level of the sub-menu. Is there such a universal identifier for the second level/grandchild sub-menu?
if not, can you help me identify what it is?
Thanks again for your time on this.
|
#13
Feb 28, 2017, 12:40 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
So what CSS did the code examiner say it was applying to that menu item?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#14
Feb 28, 2017, 12:42 PM
|
|
The more detailed aspects of digging into CSS code are really not my expertise.
Is there any way you can help me identify it, or let me know, as you did in the other thread, if there's a code identifier like "sub-menu" which applies specifically to the 2nd level of the sub-menu?
|
#15
Feb 28, 2017, 01:57 PM
|
|
I managed to identify the individual 2nd level sub-menu items I wanted to move up some...the higher level css indicator though is the same as the one for the next level up of the sub menu so I'm still not sure what would apply to just the 2nd level container itself.
In the mean time I've put in code to move all the second level items where I wanted...It works as I want, but I'm wondering if those menu item indicators are generated manually and might change? (meaning the CSS code might stop working since it points to those specific items?)
Or again is there a way to refer to the 2nd level container itself, like "sub-menu" works for all levels of the sub-menu?
|
#16
Feb 28, 2017, 02:48 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sure, you have to be more specific in your CSS selector. Lets say you have
HTML Code:
<div>div 1
<div class="myclass">div 2
<div class="myclass">div 3
<div class="myclass">div 4
</div>
</div>
</div>
</div>
and you want the 'div 3' to be red. If you use
HTML Code:
.myclass {color: red;}
then the literal 'div 3' will show in red, but so will 'div 2' and 'div 4'. If you use
HTML Code:
.myclass .myclass {color: red;}
then the literal 'div 3' will show in red, 'div 2' will be black but 'div 4' will also be red (that's the cascading part of CSS). one way to make sure only 'div 3' is red would to use two selectors
HTML Code:
.myclass .myclass {color: red;}
.myclass .myclass .myclass {color: black;}
the first turns red all elements with a class of 'myclass' who also have a parent with a class of 'myclass' (div 3' and 'div 3') and the second turns black all elements with a class of 'myclass' who has a parent with a class of 'myclass' who also has a parent with a class of 'myclass' - i.e. 'div 4'
if you are going to tinker with the look of any theme, you need to understand CSS and how a small change can be far reaching.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#17
Feb 28, 2017, 03:28 PM
|
|
That's very detailed and helpful...so if I wanted to have something apply to the second level menu would I simply repeat the ".sub-menu" indicator in the css?
ie: .sub-menu .sub-menu
|
#18
Feb 28, 2017, 04:48 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Yes IF the parent and child elements both have that class assigned - NOTE, if there is other CSS with a more specific CSS Selector, and it has any of the CSS rules your are using, the more specific case will be used.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#19
Feb 28, 2017, 05:52 PM
|
|
Where do I pay my tuition for this month's CSS class?
Thanks again for the time JD!
|
|