ThemeShaper Forums » Thematic

[closed]

Spacing between individual menu tabs

(6 posts)
  • Started 4 years ago by PapaBear
  • Latest reply from whiteweazel21
  • This topic is not resolved

Tags:

  1. 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:

    http://imgur.com/1zbKb.png

    Thanks in advance for any help you guys can give!

    Posted 4 years ago #
  2. 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

    Posted 4 years ago #
  3. 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!

    Posted 4 years ago #
  4. 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}

    Posted 4 years ago #
  5. 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

    Posted 3 years ago #
  6. 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

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.