[resolved] Difficult CSS code - Is it possible? (10 posts)

  1. Shinock
    Posted 3 years ago #

    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!

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Look at using CSS before and after pseudo elements.

  3. Shinock
    Posted 3 years ago #

    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

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  5. Shinock
    Posted 3 years ago #

    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

  6. Michael
    Forum Moderator
    Posted 3 years ago #

    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

  7. Shinock
    Posted 3 years ago #

    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;

  8. Shinock
    Posted 3 years ago #

    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!

  9. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  10. Shinock
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic