Need help? Check out our Support site, then

Changing the appearance of custom menu and submenu (Suburbia theme)

  1. Hi, apologies for another beginner query.

    I've created a custom menu for my blog and a submenu for Categories (see here: contextualternate [dot] com). I was wondering if there is any way to move the submenus from appearing on the right of the Categories link, to appearing under it, i.e. something that doesn't overlap on the posts, but keeps to the left column.

    Unfortunately, I don't seem to have access to php files, is there a way to modify this through CSS?

    Any help will be much appreciated. Thanks!

    The blog I need help with is

  2. Paste this into the CSS editor:

    #access ul ul {
    left: 0;
    #access ul ul li {
    padding: 0;
  3. Brilliant! Thanks so much.

    Is there any way to keep the 'Categories' tab in the main menu visible while showing the submenu underneath?

    Many thanks for your help!

  4. You're welcome.
    Turn this:

    #access ul ul {
    left: 0;


    #access ul ul {
        left: 0;
        top: 2.9em;
  5. Thanks! That's just wonderful.

    Hate to bug you with my incompetence, but last question, I promise:
    If you see in the submenu list on the blog now, there is a line appearing on the right hand side of the links. I'm trying to change 'border' properties but that is probably not the correct one. What can I change to have just the dotted horizontal lines and not any other border? I tried messing with the ul ul properties as well but am clearly missing the right term!

    Your help is much appreciated. Thanks!

  6. Add this line to #access ul ul:
    box-shadow: none;
    In my opinion the end result is wrong: the sub items become identical to the top level items, so it looks as if you've got 11 top level items but there's a glitch and only 3 of them show at first. There must be something that distinguishes sub items from top level items (for instance indentation and/or italics).
    Also notice how bad the submenu looks against the grey strip when your page is short, for instance on this page:
    If I were you I would remove the dotted lines, decrease the space between the sub items, turn them to italics and slightly indented, and add a left border to the whole submenu.

  7. That's a very good point. I've fixed some bits but it does seem odd with the overlapping. I'll have to retract my earlier promise to ask another question!

    Is there a way to keep the submenu visible all the time once you click on 'Categories' instead of the floating style currently there (i.e. the list remains there till you click again to remove it)?

    Which raises a more intriguing possibility: is it possible, within the restrictions of this theme, to somehow have only 4 columns (i.e. keep the left column blank throughout)? A rather bad way to do this seems to be changing '#access: height' to something twice the size of 'grid' and 'aside', but that basically changes the length of every page. Awful, I know!

    Many thanks for your comments. You've been incredibly helpful.

  8. You're welcome.

    a) As far as know you cannot use CSS editing to create on-click effects: this requires types of code we're not allowed to use on What you can do is make the submenu permanently visible, if you wish.

    b) It wouldn't have to change the length of every page: you can target #access on the homepage only. Selector:
    .home #access
    The problem with your idea is that WP has added infinite scrolling to Suburbia, so when you have more posts they'll all load on the same page, so no fixed height will do.
    What you need to do is add a left border to #content, add a left margin to it so that it starts where the first column ends, decrease its width so it ends where it ends now, then remove the right border of #access on the homepage. Want to try this yourself?

  9. Wow, thanks! This is really exciting!

    I've tried your suggestion and it works fantastically. Two things I'm not getting anywhere with:

    1. the line appearing on the left of only the first post on the home page and on individual category archives pages. Can't figure out which element that border belongs to.

    2. The individual category pages, of course, still appear with the default 5-columns. Not sure what the code is for the category modifier, .category?

    Thanks a ton!

  10. Wait, I got the 1st bit: it's the #access border. It seems to be a bit short at the bottom though! There's a 1px bit missing towards the bottom of the menu items.

  11. Sorry, I hadn't checked category pages. I didn't expect them to be different, but they are: there's no #content div. So forget my previous suggestion. Alternative: left padding to #middle, equal negative margin (and no border) to #access, left border to .grid. For the default version of the theme, this would be:

    .home .middle, .archive .middle {
    padding-left: 196px;
    .home #access, .archive #access {
    border-right: 0 none;
    margin-left: -196px
    .grid {
    border-left: 1px solid #E0E0E0;
    border-right: 0 none;

    You have widened things, so you'll probably need to increase the values.

  12. (Missing a semicolon after "-196px".)

  13. Awesomeness itself! I think it works now. I've kept the borders around all the posts so that the non-multiples-of-4 ones also have a frame.

    Thanks so much, this has been just fabulous and I've learned a great deal (for my limited ability). I'd like to acknowledge your help, in the 'credits' section on the About page and link to yours. Do let me know if you prefer any specific way of address or if Panos (justpi) will be fine (or if you'd rather not have any of it, don't mean to be presumptuous).

    Thanks a lot again.

  14. Hi, just another query. The header space (what really is the 'tagline' space) on the blog at the moment is just a blank white rectangle, as I don't really want to use it. Is there a way to modify or even delete this from all pages? Or is this a theme-specified thing?

    Many thanks again!

  15. You're welcome again!

    In Firefox I'm seeing a very thin stripe between the rightmost posts and the grey bg. Try changing the 196px left padding to 197px.

    The left column seems to empty to me. Try this please and see if you like it:

    #access ul ul {
    display: block;

    As for your new question, yes, of course you can delete the header area (although I'm not sure it will look ok, so please define "modify" too).
    Before we try this you need to correct something. You have deleted the blog title: that's very bad for search engines, so first go to Settings > General and enter the title again. (It can then be hidden from view, even if you don't remove the whole header area.)

  16. ("to empty" = too empty)

  17. Thank you! Yes, there should be some more links coming in the left column as things go on, but maybe the categories being out there is better. I will eventually have more posts than 4 in the category pages too, so that should cover the current situation of those.

    What I meant by modifying the header area: the white space at the top seems too ‘default’, and the grey space between the two white blocks could probably look better removed or reduced in thickness, so it functions more or less as a horizontal rule instead of the theme's header division. Might be something to experiment with. What do you think?

    Blog title added, not sure how that disappeared. Thanks!

  18. To remove the grey strip below the header area, add this:

    .header {
    margin: 0;

    To remove the grey strip as well as make the header area shorter, add this instead:

    #site-title, .desc {
    display: none;
    .header {
    margin: 0;
    min-height: 65px;
    #access .menu > ul, #access {
    margin-top: 20px;

    Decrease the min-height, and increase the margin-top by the same amount.

    To eliminate the header area altogether, keep the above and

    a) turn the min-height to 0 and the margin-top to 100px;

    b) add this to .header:
    padding-bottom: 0;

    c) and add this too:

    .header .space {
        height: 0;
        padding-top: 0;
    #header-image {
    margin-top: 11px;
  19. If you opt for any of the above, I think you should also remove the grey strip above the footer:

    .middle {
    margin-bottom: 0;

    PS You forgot this:

    In Firefox I'm seeing a very thin stripe between the rightmost posts and the grey bg. Try changing the 196px left padding to 197px.

  20. Thank you so much!

    Hmm... there seems to be something wrong. I can't get rid of that little gap that shows on the right extreme. If I change to 197 instead of 196, the posts shift down. I checked on Suburbia's demo and even there this seems to be the case (small gap on the right, especially if you zoom in). It is even more strange if you zoom out as the posts begin to shift out of grid. Not sure what I'm doing wrong. According to the calculations, 196 should be the correct value (I've considered the 1px value of borders etc).

    Now that I've changed the top grey area to something smaller, the new problem is to get rid of the similar grey rule on the pages, i.e. above About or Essays, it seems to be too much to have that second grey line.

    If you click the first post and see the all caps Title page heading, there seems to be a green shadow. Is this changeable?

    Also, clicking on the 'Print culture/book history' category sometimes gives weird shifts to the whole block. And at other times it doesn't.

    Again, cannot thank you enough for your help.

  21. Okay, this is a non-issue:

    Also, clicking on the 'Print culture/book history' category sometimes gives weird shifts to the whole block. And at other times it doesn't.

    It's just the small number of posts removing the scrollbar!

  22. It is even more strange if you zoom out as the posts begin to shift out of grid. Not sure what I'm doing wrong.

    I had never noticed this! It happens in the out-of-the box version of the theme too, so you/we aren't doing anything wrong, and there's nothing you can do (other than report it in the Themes forum in case WP wants to do something about it).

    get rid of the similar grey rule on the pages

    Add this:

    #single h1 {
    border: 0 none !important;
    margin-top: 10px !important;

    there seems to be a green shadow. Is this changeable?

    To me that green smear looks as if there's something wrong with my eyes or my monitor, so I would get rid of it:

    #single strong {
    text-shadow: none;

    Couple of other suggestions:

    a) Since the category etc pages are still too short, you could add this (temporarily):

    .archive #access ul ul, .error404 #access ul ul {
        display: none;

    b) On the homepage there's a problem above the footer: column 1 no border, columns 2-4 two borders, column 5 one border. Also I think it should look like the header. So I would suggest you replace this addition:

    .middle {
        border-bottom: 1px solid #BFBFBF;
        margin-bottom: 0;

    with this:

    .middle {
    margin-bottom: -5px;
    .footer {
    border-top: 7px solid #E0E0E0;
  23. Thank you, thank you, thank you!

    Things seem to be in place now, more or less. But suddenly there's a 'Related' section appearing under each post page. Must remove or else format it better!

  24. You're welcome!

    The "Related" section is a new feature WP is testing. You should be able to disable it in Settings > Reading.

    (As for the other thing: you don't need to acknowledge anything in your credits; but if you wish to, I don't mind either.)

  25. Perfect! Much appreciated.

  26. Hi again, I was wondering if there is a way to increase the font-size and line-height all across the posts and pages, without having to wrap the text in <div> or <span>? There is, of course, the Fonts (heading, body text) option in the customisation menu but that doesn't provide any control of the line-spacing and it adds the size change to other bits on the home page, which I don't want.

    The same for block quotes, which you can see here:

    What I've done so far is

    blockquote {
    	background: none;
    	margin-top: 0;
    	margin-left: 30px;
    	padding-top: 0;
    	padding-left: 30px;
    	padding-bottom: 0;
    	text-shadow: none;

    This however does not let me change 'font-color' or 'line-height' so that must be getting defined somewhere else I'm not able to locate. It looks a bit blurry for some reason, which I'm guessing is the colour but may be some other font attribute.

    Will be grateful as ever for your help. Many thanks!

  27. Hi again,
    This is a public forum, i.e. designed so that Q&As are available to all members of the community. To help other users looking for the same answers, the title of a thread should describe its content. This thread has long veered away from its original subject, so please start a new thread on this and I'll try to explain everything.

  28. Apologies, will do.

Topic Closed

This topic has been closed to new replies.

About this Topic