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

  • Author
    Posts
  • #1518195

    errorsinc
    Member

    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 contextualternate.com.

    #1518413

    justpi
    Member

    Paste this into the CSS editor:

    #access ul ul {
    left: 0;
    }
    #access ul ul li {
    padding: 0;
    }

    #1518428

    errorsinc
    Member

    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!

    #1518432

    justpi
    Member

    You’re welcome.
    Turn this:

    #access ul ul {
    left: 0;
    }

    to:

    #access ul ul {
        left: 0;
        top: 2.9em;
    }

    #1518434

    errorsinc
    Member

    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!

    #1518443

    justpi
    Member

    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:
    http://contextualternate.com/category/bibliographies/
    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.

    #1518444

    errorsinc
    Member

    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.

    #1518445

    justpi
    Member

    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 wordpress.com. 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?

    #1518446

    errorsinc
    Member

    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!

    #1518447

    errorsinc
    Member

    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.

    #1518448

    justpi
    Member

    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.

    #1518449

    justpi
    Member

    (Missing a semicolon after “-196px”.)

    #1518450

    errorsinc
    Member

    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.

    #1518454

    errorsinc
    Member

    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!

    #1518455

    justpi
    Member

    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.)

    #1518456

    justpi
    Member

    (“to empty” = too empty)

    #1518457

    errorsinc
    Member

    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!

    #1518460

    justpi
    Member

    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 ul.menu {
    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;
    }

    #1518461

    justpi
    Member

    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.

    #1518467

    errorsinc
    Member

    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.

The topic ‘Changing the appearance of custom menu and submenu (Suburbia theme)’ is closed to new replies.