PapaBear
Member
How would I go about adding space between one of my menu tabs and the rest, like having my Home, Category, and About tabs sitting together in the normal place, and then a Forums tab sitting a bit off to the right. I made a quick mockup in paint to better illustrate what I'm going for:
Thanks in advance for any help you guys can give!
Hi PapaBear
Give the ul.sf-menu a width and target the Forum's page li class by targeting it's page-id. You can look at the source of your site to get the the proper class for the forums li. In the following code the number 115 is an exapmle of a page id number. You'll need to change this no. to suit your needs.
.sf-menu {width:100%}
.sf-menu li.page-item-115 {float:right}Hope this gets you pointed in the right direction.
-Gene
PapaBear
Member
This worked! Thank you so much
There is only one issue that's not too big, but I'm not sure how to deal with. The border around the tab closest to the forum tab is missing on the right side. Looking at my mockup, it's as if the "About" tab is missing its rightmost line, I guess because before it was just compensating by having the tab next to it overlap and have the line on the Forum tab act as a border between the both of them. Is there a way to restore this border? Thanks again!
Isolate the anchor by prepending the li class of the page id. In this example I'm assuming that About page id is 114:
.page-item-114 a {border-right:1px #ccc solid}
whiteweazel21
Member
I must be doing something incredible stupid, but does this still work?
I've adjusted the ID number to the correct menu tab, and also tried menu-item-#, but no luck. I'm thinking that I'm overlooking something simple. I've tried a number of variations but somehow I'm just not targeting the menu (changing color on ".sf-menu" does not seem to do anything either)...
P.S. Wow, my gravatar works here, I was wondering for months how to get a picture on my profile lol
whiteweazel21
Member
Hrm, that was rather weird. It worked in localhost but wouldn't on the server, even copy/pasted. This time around it worked, perhaps I accidentally was editing the wrong style.css o.o
Anyway I did use a slightly different code if it did make any difference.
.sf-menu {width:100%}
.sf-menu li#menu-item-247.menu-item {
float:right;
}Upon further testing it seems that I was using the right style.css but the original code was not targeting the menu, the code I posted does work for me though, strange haha
This topic has been closed to new replies.