Jump to content
Sign in to follow this  
artsigns

Centred Main Menu Breaks Drop Down Menu Tabs

Recommended Posts

artsigns

Hi there, Have a problem with drop down menus, I got some code from platform pro to centre the main menu and it seems to affect the drop down menus here are a few examples of sites with the issue, I have tried disabling plugins etc and the problem does not go away. It seems to be when you centre the main menu. Any help greatly appreciated!! cheers http://www.workingforward.co.uk http://www.thesignschool.co.uk

Share this post


Link to post
Share on other sites
Rob
It appears you applied considerable customization to the menus in CSS. Without that code, I'd be unable to help. Can you please carefully read this http://www.pagelines.com/forum/discussion/12193/please-read-before-posting#Item_1, then reply with your code in the appropriate tags.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
artsigns
Hi there, Have had a read through that, I have posted this before and was new so accidentally clicked the accept on an answer and it closed it though I hadn't got an answer that worked so apologies if i'm coming across as being a pain! hahah I got the code from you guys on here I haven't written stuff myself I'd presumed its support staff that reply to questions? Or have I been taking suggestion posts from just anyone?? eek! This is the code I was issued by you guys to centre the main menu, make the menu a bit closer to the header and increase the font size for the main menu items. This is all the custom code that's on there #primary-nav li{float:none !important;display:inline !important;} #primary-nav a{float:none !important;display:inline !important;} #nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;} #primary-nav li, a {font-size: 1.4em;} It was suggested on here that because to centre it, it stops it floating left, and also the centre align breaks the sub menu layout Is there a line of code to select or call the sub menu element(s) to float left and text align left? Assuming thats what is required to fix it Many kind thanks again tags: css, sub navigation,

Share this post


Link to post
Share on other sites
Rob
Not a pain at all. I was trying to get you to use the code tags. BTW, don't worry about "accepting" an answer. You should actually, if you agree. If you don't or need to continue, just add another question like.. "But it doesn't work well, what's next?" First, your font size is way too large for a menu. Next, the padding is also way too big for that purpose. Your problem too is the "text-align:center;" which is centering the subnav. If you wanted the primary nav centered, that's where that little snippet belongs. You have it applied to the subnav and as a result, your subnav menu items will jumble up. Try moving it, and please reduce both the padding and the font size as they make the menu way too big to fit on one line.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
artsigns
Hi there, ahh thankyou again! Please excuse my ignorance generally, I'm still learning the hooks and selectors for platform pro What you said makes sense, I don't know which selects the main nav and which the sub, can kinda guess. I got sent all that code used from support on here and just pasted in, so if is ok could you breakdown what it is so I can alter it. Then I can hopefully not ask so many questions in the future once I understand it, or is there a pdf or something that lists or illustrates how to select the main menu in css, sub menu, etc etc? body{ } #primary-nav li{float:none !important;display:inline !important;} //I would guess this means stop the main menu floating left? is that what centres the main menu or does it only refer to the list items in the main menu or both? or something else? #primary-nav a{float:none !important;display:inline !important;} //I'm guessing this does the same as above but for the links/ anchors #nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;} //is this what refers to the sub nav? and where the padding issue was/is? I think this was given to me to make the main menu sit a bit closer to the header instead of giving a big gap or perhaps the menu to the page, one of the two. I had also imagined the text align centre is what centres the main menu? Again please excuse my ignorance as I got given all this code to paste in by support so am not sure why which bits dont exactly work! I understand css medium to well normally, just not with specifics to the platform pro framework and doing inspect element does not seem that obvious to me yet for this system as there are mixed references if that makes sense #primary-nav li, a {font-size: 1.4em;} //and this I asked for seperately to set the font size of the main menu text, does this apply to the sub nav text also? would I need to alter this or can it stay as is? h3{font-weight: bold !important;} //this I was given with the !important bit so it's not ignored so I can manually set the size of h1,h2,h3,h4 etc etc if needs be Does the sub nav use h3 by any chance? is that whats messing it up? I ask all this so I can understand what it's all doing so I don't keep asking you guys all the time or could you just give me the code with a breakdown if is ok to centre main menu, set font size of main menu text, set font size of sub menu text while the main menu is centred and the sub nav remains normal text size or not so bog it breaks the display/layout Many kind thanks for your patience again

Share this post


Link to post
Share on other sites
kastelic
One of the problems here is that a selector like [code] #primary-nav a [/code] will select all the anchor tags that are a child or grandchild or great-grandchild etc. of #primary-nav, so that includes the subnav too. Here is a simpler way to center your navigation. All you have to do is give #nav_row a width, try to get it close the the actual width, and then use margin: 0 auto or margin-left to position it: [code] #nav_row { width: 800px; margin-left: 10px; } [/code]

Share this post


Link to post
Share on other sites
artsigns
Thanks again, to centre the menu like that is not an ideal solution for the people that inherit the sites once we hand them over. If they make a new page etc it throws it all off and they have no idea about stuff like that at all, it needs to be centred with whatever pages etc they make, remove or rename. I've downloaded the new version of platform pro, are there any plans to have settings to centre the menu etc in platform itself? or is there a link in the platform settings somewhere to do that already? Cheers again, massively appreciate all this

Share this post


Link to post
Share on other sites
artsigns
Looking through I noticed there is a class called sub-menu Could this be used to set the float options etc to stop the sub menu items behaving as they are? Please excuse my ignorance again, I am not familiar entirely with the css structure for pagelines so am relying on feedback from you guys many thanks again

Share this post


Link to post
Share on other sites
Kate
Hello, Yes, in the past I know I've personally helped people on the forums with this same issue by using the "sub-menu" class. Let us know if you need help with that styling.

Share this post


Link to post
Share on other sites
artsigns
ahh brilliant! thankyou, that sounds like a simple but good solution how would I do that then please?? Many many thanks!!

Share this post


Link to post
Share on other sites
artsigns
.sub-menu{ padding: 0px !important; float: left !important; text-align: left !important; font-size: 1em !important; } ??

Share this post


Link to post
Share on other sites
artsigns
..I tried and it doesn't work, but I am probably using it wrong, thought I'd try to save you guys some hassle if I could! cheers

Share this post


Link to post
Share on other sites
Kate
Well, I can get you on the right road, but after playing around with it for a few minutes, it seems there are some conflicting styles. But, this should get you started: [code]#primary-nav .sub-menu li{border:none !important;display:block !important;float:left !important;width:100% !important;} #primary-nav .sub-menu li a{display:block !important;float:left !important;width:100% !important;} [/code]

Share this post


Link to post
Share on other sites
artsigns
Thankyou, that's starting to work great! ..tried putting in font size myself but it didn't work as sub menu seems to be a lot bigger than main meun text I also tried to set the z-index to 1000 to see if the hover colours above that slider work but it didn't do anything I've tried disabling the slider and you can select the sub menu elements then that would have normally sat over the slider but the colours and css is still a bit funny I've deactivated all plugins to see if I could single out anything interfering with the css and with everything switched off it's still the same The only css anywhere is in the custom code bit for platform body{ } #primary-nav li{float:none !important;display:inline !important;} #primary-nav a{float:none !important;display:inline !important;} #nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;} #primary-nav li, a {font-size: 1.4em;} .#primary-nav .sub-menu li{border:none !important;display:block !important;float:left !important;width:100% !important;} #primary-nav .sub-menu li a{display:block !important;float:left !important;width:100% !important;} h3{font-weight: bold !important;} hope this is useful if it helps the login for that site is http://www.workingforward.co.uk http://www.workingforward.co.uk/wp-admin un workingforward pw w0rkingforward Many further thanks Dominic

Share this post


Link to post
Share on other sites
kastelic
Dominic, you should be careful of your selectors. To avoid the problem of selecting ALL children of an element instead of the top level ones you can do this: [code] .main-nav > li [/code] The ">" will ensure that you only select the immediate children of the .main-nav element. Additionally be careful of this selector you have: [code] #primary-nav li, a [/code] This is not selecting all list-items in #primary-nav and all anchor tags in primary nav, as it may appear to. It is actually selecting all list-items in #primary-nav as well as all anchor tags on the entire site. The correct way is: [code] #primary-nav li, #primary-nav a [/code]

Share this post


Link to post
Share on other sites
artsigns
Thanks again! starting to make sense of this, again all the code I have been given was by support on here so the syntax used is not my doing but I get what your saying. I've learnt some cool and useful stuff through all this like the !important which I'd never heard of and the > you just described looks like a useful trick to know. I'd guess at it but as everything I've been given before was written out by someone who knew the platform system so they knew which selectors and the structure of it (that's still not quite obv to me yet, hopefully when menu is working and I can see the correct way can take the time to get the proper usage to avoid pestering you guys in future etc!) So what code would I paste in to centre the main menu, whilst keeping the regular sub menu as it should be and have control over the font size? with the correct syntax, I'd only be guessing, and obv the code I've been given on here before was not right either haha nb. The site I noticed this on first has now got ALL plugins switched off and no other css, other than the code displayed above which was issued by the platform team and pasted into the custom code box in platform. but still is not functioning properly please feel free to login to it if needs be and look around perhaps in future versions of platform you'll be able to centre the menu and set font size in the back end? seems like an obvious setting, was surprised there is no such control hope am not coming across as rude!! or anything just keen to roll some sites out and get some paychecks in!! hahah danke

Share this post


Link to post
Share on other sites
kastelic
I tried numerous ways, but without the width, I just don't know how you would acheive a universal centering of a unordered list.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×