Support » Themes and Templates » [Resolved] Difficult CSS code – Is it possible?

[Resolved] Difficult CSS code – Is it possible?

  • I am using twenty twelve. I am having an issue with the current_page_item. I want the page selected in the menu to be inclosed in [ ] like my favicon. For example you click to the home page and it would then look like [HOME]

    Is it possible to code CSS to do this? I have been learning as I go but can’t locate any information on it, mainly because I don’t know how to word it!

    At the moment I have

    .main-navigation .current-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a {text-decoration:underline;}

    So my current page has an underline.

    Please help me out if you can its one of the last things I want to do with my site!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Look at using CSS before and after pseudo elements.

    Thanks for that, I tried but it just messed up the spacing in my nav menu. Would it be better to upload an image instead of using the [] keys?

    Is there any way I could do it in HTML? would that be easier?

    Here is my site if you can help me a little with the code http://www.insidecontentmarketing

    Can you post the CSS you tried using those pseudo elements and make it apparent on your website?

    I took it off because it looked wrong, but this is what I had

    .main-navigation .current-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a:before {
    	   content: "[";

    .main-navigation .current-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a:before {
    content: “”;
    display: block;
    width: 50px;
    height: 50px;}

    That what I tried for before, and the same for after using :after

    you need to add the :before and :after to each of the styles in the list;
    it is clearer to see if you write the css slightly different:


    .main-navigation .current-menu-item a:before,
    .main-navigation .current-menu-ancestor a:before,
    .main-navigation .current_page_item a:before,
    .main-navigation .current_page_ancestor a:before {
    	   content: "[";

    same for :after

    That is working now, Thank you for your help. The spacing looked a little strange when it was just contet: “[” so I added a space content:”[ ” but the spacing on top looks a bit strange?

    Do I still need to add the content i.e:

    ` #example:before {
    2 content: “”;
    3 display: block;
    4 width: 100px;
    5 height: 100px;

    I think that worked. I am not sure of the spacing, it is aligning with the top of the font, but I think that’s the best I can do. Thanks for your help Andrew and Alchymyth.

    Now to try and sort out my footer widgets!

    Remember you can add more than content: "" in the :before and :after styles, try playing around with font-size or font weight, etc.

    Andrew, thank you kindly for all your assistance. Adjusting the style worked perfectly. I adjusted it like this

    .main-navigation .current-menu-item a:after,
    .main-navigation .current-menu-ancestor a:after,
    .main-navigation .current_page_item a:after,
    .main-navigation .current_page_ancestor a:after {
    	   content: "]";
    font-size: 15px;

    Do we mark threads as solved here? Thank you again for your support I really appreciate it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Difficult CSS code – Is it possible?’ is closed to new replies.
Skip to toolbar