closed not a support questionHi
I am using the Newscast modern template and want to make the spacing equal between the main menu items. Right now, you can see certain headings are too close to each other.
I also want to reduce the height of the menu - I don't intend to add sub-text underneath the headings. I know this was covered off in another topic, but the link no longer works.
Is it also possible to increase the font size for the headings?
Thanks!
Ismael
Moderator
Hi sq85,
Try to add this on the bottom of your style.css:
//adjusts the spacing of the main menu items
ul#menu-first li a {
padding-right: 90px !important;
}
//adjusts the height of the secondary menu
ul#menu-second li a {
height: auto !important;
padding-top: 5px !important;
padding-bottom: 0 !important;
}
//adjusts the space on top of the primary menu (I assume this is what you mean by headings)
.nav_wrapper {
padding-top: 110px !important;
}
//adjusts the font size of the primary menu (headings)
#menu-first li a {
font-size: 30px !important;
}Hope this helps. :)
Regards,
Ismael
Brilliant, worked a treat! Few more questions so bear with me :)
FYI i've set 'second' as my main menu (ul#menu-second li a)
- Can you tell me how to centre the text for the menu items? Or space individual menu items? If you look at my page, you can see 'Relationships' and 'Style' are too close together, I want to increase the distance between these two menu items so everything is equally spaced out.
- Now that i've adjusted the height of the columns, the drop-down menus (when you hover over a menu item) are too far from the main menu. Is it possible to give the code so that I can have the drop down menus closer to the headings? Can I also increase the font size for the headings?
- I keep get the 'cheatin, uh' everytime I try to change the logo. Is there a code so I can manually change the logo?
Kind regards
Shayan
Devin
Moderator
Hi Shayan,
This should center the menu items:
#menu-second.catnav li a strong {
text-align: center;
}For the sub menus:
#top #menu-second.catnav .sub-menu {
top: 40px;
}The font size is already set to 30px with the code you've added in from Ismael above.
For the cheatin, uh message, open framework>theme_plugins>kriesi_option_pages>kriesi_option_pages.php
Search for post_id and change it to post_ID. It should be on line 381 inside a big echo. Then save the file back on your server and try uploading an image for your logo again.
Otherwise, you can just set your logo in header.php on line 100 as regular html and replacing the php call to the theme set logo. Or, replace the logo file in the theme files with your own.
Regards,
Devin
Hi Sulker - maybe I can help. These codes have all worked for me.
For Ismael's codes, remove all the lines that contain //
For instance, this code below:
//adjusts the spacing of the main menu items
ul#menu-first li a {
padding-right: 90px !important;
}
becomes
ul#menu-first li a {
padding-right: 90px !important;
}
All the lines that contain // are for our information, to let us know what each code does. Once you understand, remove them and the code will work just fine.
Paste all of Devin's codes after Ismael's code. Make sure the previous line ends with ' } ' when you add them to the bottom of style.css
sulker
Blocked
Hi Shayan,
Thanks for your help. The codes Ismael gave works, but the codes Devin still is not working. Please have a look: http://imgur.com/jGcri
You can see the sub menu is nested with menu it belongs.
I can't explore what this code changes:
#top #menu-second.catnav .sub-menu {
top: 40px;
}
Also I wanted to adjust the distance of topics in second menu, but these codes did not help for this. I mean the menu which begins with "İyi Yönetinim" in my site. How can I adjust the distance between theese topics?
sulker
Blocked
Reporting the codes:
As one by one:
The codes Devin gave doesn't make any sense for styl.css. They couldn't changed anything.
As for Ismael's codes... The code
ul#menu-first li a {
padding-right: 90px !important;
causes the bug I wrote before: http://imgur.com/jGcri
To debug it, the value has to be 10px. If I give a value more than 10, then the bug I show you appears. So I can't adjust the spaces if I want make them more than 10 px.
At the other hand, the code
ul#menu-second li a {
height: auto !important;
padding-top: 5px !important;
padding-bottom: 0 !important;
doesn't make any sense for style.css too.
Only the other codes remaining of Ismael works smoothly.
Who one will fix it and explain the situations I write above?
After fixing these issues and out of these problems also I want to adjust/resize the category topics and the distance between them.
Nick
Moderator
Hi,
Hmmm... After looking at the code , I think the twitter widget could be the problem, it looks suspicious. However lets please first look at the menu. To center the menu text and to make room in the last menu item, please use the code below at the bottom of your custom.css file:
#top .catnav li {
text-align: center;
}
#top .catnav .noborder{
min-width: 129px;
}this will change the width of 2nd level menus as well as center them, if you want. if not, take the center out of it please:
#top .catnav li ul a {
max-width: 150px;
text-align: center;
}You are using a very long word 'Kombinasyonlari' .. is there a way to make it shorter or break it up into two smaller words? Because there is no way to make all the menu items equidistant from each other, when one word is as long as half of the alphabet
Please explain what else is needed to get the site the way you want it.
Thanks,
Nick
sulker
Blocked
Hi Nick,
Thanks for your help firs of all... And please be sure that the twitter widget you see now, is not the widget that causes problems before. They have the same interface, but they are not the same software. So it is not suspicious as you guessed.
Your codes worked well. Thanks for that. But if you read the message I wrote above, you could see that the problem I have is not only the equalizing the distance between menu items.
Please have a look: http://imgur.com/jGcri
You can see the submenu is nested with menu it belongs. So how can I resize the distance between the items oof first menu? When I want resize them by giving a value more than 10px there would be problem in submenus of first menu as you see.
Please claw this issue and fix. I trust you. You can do that.
And also I wanna ask that the codes Ismael and Devin gave above, must they added to style.css or style4.css which I use? I added them to style.css because they wrote like that.
PS: I am awared that I wrote many issues, may be this may bother you, but I want to fix my problems step by step, one by one. The remaining problems I have, are not so difficult as you see before, please take it easy.. :)
PS-2: I want also the codes of Ismal's and Devin's, working form for my site.
Nick
Moderator
Hi,
I am looking at your website , through FF, IE, Chrome, Safari on Win7 and I see menus all look good... What device/browser are you using?
It doesn't bother me to fix many issues as long as i know what the problems are. I am here to help!
You should put all new css code at the *very end* of custom.css file which is the last css file the browser reads. This way , the new css will block the old css. If you put new css in the beginning of styles.css (its bad), the old css will block the new css and all the fixes will not be visible.
Thanks,
Nick
sulker
Blocked
Hi Nick,
You can't see any poblem now, because I did not put Ismael's cod at style4.css. When I put it, there becomes a problem. I'll show you.
Now this is the nomal one, without putting the Ismael's code: http://imgur.com/gqK4A
And this is the anormal one, with putting the Ismael's code: http://imgur.com/d5wSu
Could you see the problem now? Th submenus "Hukuki Eşitlik" and " "Siyasi Eşitlik" couldn't be read exactly in anormal one, with Ismael's code. In anormal one the submenus are shifting to be left.
It isn't a browser problem. It is just a coding problem. The browser doesn't matter for this problem.
Please could you fix this problem at first?
This is the code (of Ismael) that makes anormal, makes problem:
ul#menu-first li a {
padding-right: 90px !important;
}
Nick
Moderator
Hi,
Let us forget for now Ismael code. This is how your site looks now. http://i.imgur.com/Dw1b3.jpg Nothing is covered up, and everything can be seen. From this point, what are you trying to accomplish. How do you want end result to look. (No Islmael code, lets imagine it never existed for now.)
Thanks,
Nick
sulker
Blocked
Hi,
I'm not sure that you undestand me. I show you the bug with Ismael's code. I want to adjust the both of the menus as I want. And Ismael gave a code -so Devin- for this wish. But the codes did not supply my wish. For example, if I want to adjust the first menu by giving a pixel value more than 10 in Ismael's code, then there becomes problems as I gave the picture above. So if I want to make the first menu topics more far from each other, how can I do that without I am exposed this problem?
I persistently say you to look this: http://imgur.com/d5wSu
Say me now, is it normal? Couldn't you see any problem?
I want to adjust the menus and its topics as anyone can. I can't say you "this is my choice finally". Because, may be I'll be borred from the form of menus and topics and I'll want to change it? So if I can not adjust, how can I do that?
Please fix it if you can. And if you couldn't fix it, don't query my aims or final view... May be another one could fix it without querying me.
sulker
Blocked
I want to make the distance between the first menu topics more far than it looks now. Therfore I give the value as 30 in Ismael's code so it looks like good for me. When I give 30 as value in Ismael's code, the distance between first menu topics seems good to me, but then there becomes a problem. Because when I give a value more than 10 (like 30 as I gave) the submenus of first menu topics are shifting to be left and they couldn't be read exactly. I tried to tell this problem but somehow Nick did not understand this problem though I told by sending pictures of this faulty seen.
Anyone understand? Anyone could fix it?
Nick
Moderator
Hi,
I am working with your code. The image shows everything is broken. While your live site whose code I can see and change shows everything working well. So i prefer to begin where everything is working well.
Think of me as your brain surgeon. Now you wouldn't tell a doctor where to drill right? You would trust his expert opinion. I am an expert and am giving you my opinion: as to the easiest, most mutually beneficial, most wonderful way to create everything you wanted from this menu to make you the happiest you ever been that will make you dance and sing from joy, and you will want to send me a box of eye glasses cleaning fluid for my birthday even.
Remember the widget from before. and I was right. And you fought just like this the entire time.
I can not re-create the code to make it work like the image you have. I have your url. I am looking at your live code with which I can work and it's not broken. Please put the broken code back, and I will gladly help you. Because I can not see one thing different between your life site and picture of a broken menu (except for the broken menu that is). Text looks the same, same distance, same size. So again, what are you trying to do, without talking about code above this that was given to a different client.
Thanks,
Nick
Nick
Moderator
Hi,
Here is css for you based on the code of your current site. I need to look at it. I've made the top menu wide, equal spacing, and sub-menu and sub-sub menu are all lined up. I may have missed one, please don't take it out, let me see the code so I can make final adjustment.
Add this code to the end of your custom.css file.
#top .catnav {
width: 1012px;
right: 21px;
}
#top .catnav li {
text-align: center;
margin-top: 0;
margin-left: 9.7px;
marign-right: 1px;
}
#top .catnav li a {
padding: 13px 10px 10px 10px;
width: 114px;
}
#top .sub-menu {
left: 0px;
}
#top .catnav ul {
width: 172px;
left: -2px;
}
#top .catnav li ul {
border-top: 0px solid #333;
}
#top .nav li ul ul {
left: 171px;
top: -1px;
}Thanks,
Nick
sulker
Blocked
Hi Nick,
Please look at my site, while I added the codes to the bottom of my custom.css that t you gave above as your wish. This times the problem I noted to you is solved (the first menu's sub menus were shifting left you know) but there becomes again a problem with these codes. Please look at the sub menus of second menu. You can see the space between menu and sub menu boxes. They are not adjacent as they should be now.
Also by using your codes I can't still take the menu items to the center. They are still left justified. This problem still goes on. Also I can't increase the distance between the items of firs menu still by using your codes. Please note that, I not only want equal spacing, also I want to adjust the spaces as I want.
Now, let me see what miraculous things could you do.
PS: I used only your codes you gave at your last post, not the others.
And Mery Christmas to all :)
sulker
Blocked
The second menu laying in a wide place with equal spaces. There is not problem there ( may be I will prefer more closer items and more far away from the text limits right and left). There is problem in first menu (the menu above the second menu) It could never centered by using your codes. Also when I want to adjust the space between items of first and also second menu by using your codes, always there becomes a problem as I said before. The sub sub menus shifted to left or right as you could see now (now please look at the sub sub menus of second menu).
I want ,
1- Adjust the space between the items of first menu.
2-Adjust the space between th items of second menu (menu under second)
3- And then center the menu items of first menu and second menu.
I want all of these without having a problem as I have now.
Devin
Moderator
You can adjust the padding on the first menu, which will adjust the space between each with the following css:
#top .nav li a {
padding-left: 6px;
padding-right: 30px;
}You can adjust the secondary category menu item spacing with the css you have in style4.css:
#top .catnav li a {
padding: 13px 10px 10px 10px;
width: 114px;
}The padding can be further broken down to the following to make it easier (replace what you have with this for that specific :
#top .catnav li a {
padding-top: 13px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 114px;
}The text lines are already centered but it isn't possible to center align the entire navigation menu as a whole because it doesn't have a defined width. The best you can do is fake the effect by adjusting the padding or margins.
Regards,
Devin
sulker
Blocked
Hi Devin,
I know all of these but when I I adjust by using these css there becomes a problem in sub sub menus of first menu or second menu. The background of sub sub menu (the box I mean) shifted left or right as you can see. Do you have a look to my site just now? Please see the sub sub menus of second menu. The box/background of sub sub menus are not adjacent when I use the css codes you gave. If they shifted to right, I can't reach the sub sub ...sub menus of the menu. If they shifted to left, so I can't read the items of sub sub menu.
I sent a pic. of the problem before. Nick has seen it. also you can see it just now on my site.
Do you understand my problem?
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
