Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Need help with sub-menu styling


  #1  
Old Feb 27, 2017, 03:01 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 27, 2017, 03:22 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 27, 2017, 03:26 PM
rickpoet
 
80 posts · Jan 2010
Quote:
Originally Posted by juggledad
So where did you put that CSS?
ATO Options / Add Html/CSS Inserts / CSS Inserts
  #4  
Old Feb 27, 2017, 04:30 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 27, 2017, 04:32 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 27, 2017, 06:13 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 27, 2017, 06:46 PM
rickpoet
 
80 posts · Jan 2010
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 06:49 PM.
  #8  
Old Feb 27, 2017, 07:19 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 27, 2017, 07:23 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 27, 2017, 07:27 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 28, 2017, 07:39 AM
juggledad's Avatar
juggledad
 
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  
Old Feb 28, 2017, 10:20 AM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 28, 2017, 11:40 AM
juggledad's Avatar
juggledad
 
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  
Old Feb 28, 2017, 11:42 AM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 28, 2017, 12:57 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 28, 2017, 01:48 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 28, 2017, 02:28 PM
rickpoet
 
80 posts · Jan 2010
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  
Old Feb 28, 2017, 03:48 PM
juggledad's Avatar
juggledad
 
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  
Old Feb 28, 2017, 04:52 PM
rickpoet
 
80 posts · Jan 2010
Where do I pay my tuition for this month's CSS class?

Thanks again for the time JD!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] LH sub-menu styling incamedia Page & Category Menu Bars 5 Mar 29, 2012 03:49 PM
I need a little help styling my menu bar. John Berry Page & Category Menu Bars 11 Apr 27, 2011 08:33 PM
Menu 1 drop-down sub-menu styling soni Atahualpa 3 Wordpress theme 1 Nov 11, 2010 02:21 AM
[SOLVED] Atahualpa 3.5.3 MENU 1 styling for drop down menu lagme Page & Category Menu Bars 2 Jul 22, 2010 09:11 PM
Page Menu Bar Styling chair Header configuration & styling 1 Aug 1, 2009 06:06 AM


All times are GMT -6. The time now is 11:59 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.