Need help? Check out our Support site, then


How can I make the subparent titles into more columns?

  1. Hello,

    When you touch the Artists label in my website, there is a list of names, which is quite long, imagining that more will be added. Is there an option to have them in two or more columns, or decrease their sizes, colors etc? sth like in this website

    http://www.asos.com/Women/

    thanks

    The blog I need help with is 9thartwave.com.

  2. There isn't a way to make multiple columns in the menu system at WordPress.com as far as I know. Is there any way you can organize the artists into two different sections, such as men and women, or perhaps by the type of art (paintings, sculpture, etc.)?

  3. unfortunately not as there will be much more...any way to make the letters smaller, change their font type, align them on the right etc?

  4. Given the number of artists, and the likelihood that you will have more and more, I'd suggest making Posts rather than Pages for them.

  5. I agree with raincoaster. I would create categories under each artist's name and assign them to Posts. Pages have diddly squat when it comes to Google juice and posts have tonnes. Creating Pages with lengthy dropdowns to sub-pages is not the best navigation experience for any reader. This may be helpful > http://onecoolsitebloggingtips.com/2011/03/06/multi-author-wordpress-com-blogs/

  6. Add this to the bottom of your CSS and see what you think. You can edit the 90% font size value as desired. The first number in the padding in the second bit of CSS is the top and bottom padding for the sub menu items. It was originally 0.78571rem and I took it down to 0.38571rem. These two changes will give you some room to grow. I probably wouldn't go much smaller on the font size, but you could take the padding down to perhaps 0.18571rem.

    At some point, you are going to have to break up the artists somehow. I don't have access to the premium themes, but if the home page supports a sidebar, you could make a custom menu of the artists and then put a custom menu widget into that sidebar. It lists it as supporting two columns, but I just don't know if that is also for the main home page template or not.

    nav[role="navigation"] ul.sub-menu li a, nav[role="navigation"] ul.children li a {
    font-size: 90%;
    }
    nav[role="navigation"] li ul li a {
        padding: 0.38571rem 0.28571rem;
    }
  7. hello guys and thanks for your answers, although i have not understood your point. what is the difference of having pages instead of posts, for artists, as long as I want to have them under the general artists page?

    the idea is to be able to access each artist directly, without getting into any specific page, but for the top labels

  8. Posts attract search engine attention but Pages do not because they are meant to be used for content that rarely changes. If every author's name is a category and you publish posts with the appropriate author assigned to it as a category then the search spiders will be all over it as it's a Post. Moreover readers click any author name category and immediately locate all the posts for that author.

  9. fair enough, but this does not solve my issue about the presentation of my site...

    moreover, i need a portfolio for each artist, which i cannot create if an artist is in a post...except for that, each artist's name appears in the posts as well

  10. what exactly are the functions of the sidebar?

  11. You can indeed to that: you can make sub-categories. Or you can make a Portfolio category and people can browse it comparing portfolios. Use your custom menu to link to the category pages and it will save space overall as well as be much more search engine optimized.

  12. One possibility to making the submenu in the Portfolio theme two columns would be to use the "columns" property in CSS. Here is an example to illustrate the idea:

    nav[role="navigation"] li ul.sub-menu {
    	background: #fff;
    	width: 435px;
    	height: 160px;
    	columns: 145px 3;
    	column-gap: 0;
    	-webkit-columns: 145px 3;
    	-webkit-column-gap: 0;
    	-moz-columns: 145px 3;
    	-moz-column-gap: 0;
    }
    nav[role="navigation"] li ul.sub-menu li,
    nav[role="navigation"] li ul.sub-menu li a {
    	padding: 0;
    	border: 0;
    }
    nav[role="navigation"] li ul:before {
    	display: none;
    }
    nav[role="navigation"] ul.sub-menu li:first-child,
    nav[role="navigation"] ul.children li:first-child,
    nav[role="navigation"] ul.sub-menu li:nth-child(1):last-child,
    nav[role="navigation"] ul.children li:nth-child(1):last-child {
    	border: 0;
    }

    I used Chrome 25 to test the example above. Consider the example experimental.

    You will need to adjust some of the spacing on your own. One of the other rules you already have in your custom CSS affects where the submenu itself falls.

    Note that the columns property is a CSS3 rule which has limited browser support. You should only use CSS3 rules with limited support like this if you choose to support visitors with modern, up-to-date web browsers. Even then, it's possible some CSS3 rules will only have partial support (for example, I tried using the "column-rule-gap" property and it didn't work in my test).

    You can find out more about the columns property from the CSS3 spec here:
    http://www.w3.org/TR/css3-multicol/

    This site shows how much browser support the rule is getting at the moment (looks like at least partial support for the main browsers across the board).

  13. Here is an additional example which doesn't use the "columns" property but uses floats instead:

    nav[role="navigation"] li ul.sub-menu {
    	background: #fff;
    	width: 290px;
    }
    nav[role="navigation"] li ul.sub-menu li,
    nav[role="navigation"] li ul.sub-menu li a {
    	padding: 0;
    	border: 0;
    	float: left;
    }
    nav[role="navigation"] li ul:before {
    	display: none;
    }
    nav[role="navigation"] ul.sub-menu li:first-child,
    nav[role="navigation"] ul.children li:first-child,
    nav[role="navigation"] ul.sub-menu li:nth-child(1):last-child,
    nav[role="navigation"] ul.children li:nth-child(1):last-child {
    	border: 0;
    }

    You might want to take this route if you'd like to support a wider range of older web browser versions.

  14. The examples above only apply to one level of submenu.

  15. many thanks, i used the first one, just one question, how can I move the whole box to go a little bit down so as not to hide the top labels?

  16. @designsimply, this is a nice solution. Saving it to my CSS goodies file. :)

  17. @thesacredpath, thank you!

  18. how can I move the whole box to go a little bit down so as not to hide the top labels?

    You've already made an adjustment to that in your custom CSS. If you look through what you already saved, you'll find this:

    nav[role="navigation"] li ul {
    	top: 15px;
    }

    Try changing "top" to "padding-top". Be careful because changing it the wrong way could disconnect it from the top menu and cause trouble.

  19. perfect, many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags