Applu to a menu title the same box style as the Connect and Search button

Home Forums Automattic Further Applu to a menu title the same box style as the Connect and Search button

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #111768 Resolve

    crcgtpc

    Hello,

    I would like to know if it’s possible to apply the style of the Search button (and Connect) to a menu title (primary menu).

    In fact, i would like to have “Agenda” title in the same red box.

    Is it possible ?

    Thx a lot for your help !

    Br,

    E.

    The blog I need help with is cgtpoitoucharentes.wordpress.com
    #152459

    Kathryn P.
    Happiness Engineer

    Sure. You can see with a browser inspector that the Agenda menu item has the unique ID menu-item-9714.

    Knowing the ID means that you can apply the red background colour with custom CSS:

    #menu-item-9714 {
    background-color: #B90504;
    }

    #152482

    crcgtpc

    Hey !

    It works but i have a bug ;-)

    When i click on the agenda page, the button stay in red (ok) but with no agenda title in the box :/

    Can you help me ?

    Thx :)

    Br,

    E.

    #152483

    crcgtpc

    You can see the bug here : http://wp.me/a3A2tk-2×8

    #152484

    crcgtpc

    Oh, and i’m wondering how i must do to reduce the title “agenda” in put down it like “Search” button. Is it possible ? Is it possible to add a logo like for Search and Connect ? (an agenda logo for exemple !).

    #152496

    crcgtpc

    PS : for the first css line you gave to me :

    #menu-item-9714 {

    background-color: #B90504;

    }

    It results a bug on firefox (not on Chrome). When i move the mouse on the primary menu, everything move horizontaly. I don’t understand why.

    Please help me

    Thx a lot,

    Br,

    E.

    #152514

    Kathryn P.
    Happiness Engineer

    When i click on the agenda page, the button stay in red (ok) but with no agenda title in the box :/

    The text is red, so it’s not visible against the red background. You can reset it to white by adding this:

    #menu-item-9714 a {
    color: #fff;
    }

    #152515

    Kathryn P.
    Happiness Engineer

    Oh, and i’m wondering how i must do to reduce the title “agenda” in put down it like “Search” button. Is it possible ? Is it possible to add a logo like for Search and Connect ? (an agenda logo for exemple !).

    I wouldn’t actually recommend making it look too much like the Search and Connect buttons. The icons are an indicator/visual cue that those are “utility” buttons that perform a special function, whereas the Agenda button just links to another page just like the other menu items do.

    #152516

    Kathryn P.
    Happiness Engineer

    PS : for the first css line you gave to me :

    #menu-item-9714 {

    background-color: #B90504;

    }

    It results a bug on firefox (not on Chrome). When i move the mouse on the primary menu, everything move horizontaly. I don’t understand why.

    The slight shifting is unrelated to the code above. If you remove it, you’ll see that the shifting still happens.

    I think the issue is the 12.4 value in this chunk of code:

    .primary-navigation .menu-item-9714 > a:hover, .primary-navigation .menu-item-82 > a:hover, .primary-navigation .menu-item-70 > a:hover, .primary-navigation .menu-item-601 > a:hover {
    color: #BF0606;
    font-size: 12.4px;
    font-weight: 700;
    }

    Try removing this line:

    font-size: 12.4px;

    That should fix it.

    #152521

    crcgtpc

    It works well for

    #menu-item-9714 a {

    color: #fff;

    thx !

    But for :

    “Try removing this line:

    font-size: 12.4px;”

    it works well but … the images on featured content move horizontaly too, even when i remove this css line :/

    #152591

    Kathryn P.
    Happiness Engineer

    Removing this custom CSS seems to get rid of the featured-image shift in Firefox:

    #page {
    margin: 0 auto;
    }

    Also a heads-up that you need to put the word “new” in comment tags in your custom CSS:

    /* new */

    #152594

    crcgtpc

    Hello,

    In fact, i would like preserve this CSS line cuz i want to have the website alligned to the center and not automaticaly to the left :/

    Is there an other solution to do it without making a bug on the featured content images (in Firefox) ?

    Br,

    E.

    #152645

    Kathryn P.
    Happiness Engineer

    Could you please try updating Firefox to version 30? The glitch seems to only be present in FF 29. Here’s a test in FF 30:

    https://cloudup.com/cA5uj82k5Zu

    #152651

    crcgtpc

    Hello,

    I upgrade Firefox to V30 and there is no difference on my screen. it seems that it comes from the width of my window. Sometimes there is the bug, sometimes not…

    Thx for your answer,

    Br,

    E.

    #152683

    Sheri

    May I ask for a clarification of the shift issue so I can make sure I’m looking at the same thing as you? When I first tried testing, I didn’t see a horizontal shift at all. But then I thought what you might be referring to is a transition, or CSS animation, placed on several elements by the Further theme. The animation is setup to happen in 0.2s for all properties that apply to the elements that have the transition property applied. What happens is that all of the properties for animated elements get applied over a 0.2 second duration. Could you look at the example video linked in the next paragraph and let me know if that’s what you’re calling a horizontal shift?

    In the following video link, watch as I hover over the featured images on the home page. You’ll notice that an animation happens each time. Then if I uncheck the transition property in the CSS rules inside the web inspector, you will see the animation go away and the change on hover “pop” very quickly each time the images are hovered over. Last, I re-checked the box to turn the transition property back on but temporarily changed the duration from 0.2s to 1s so you can see the animation happen more slowly. Check it out: https://cloudup.com/cfNxVujvunL

    Can you see the differences?

    I looked at the theme CSS and I found that quite a few elements have that transition rule applied:

    /* Animated elements */
    #page a,
    .more-link .meta-nav,
    .more-formatted-posts-link .meta-nav,
    .attachment-featured-featured img,
    .attachment-featured-thumbnail img,
    .social-links-toggle,
    .search-toggle,
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"],
    #infinite-handle span {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    }

    You may override one or all of those, depending on which elements you want to be animated and which you don’t. To remove the animation from all of the elements, you can copy the CSS block from above and change each instance of “all 0.2s ease-out” to “none”

    Can you try modifying the example I’ve posted, test it, and let me know if that gets the end result you’re looking for?

    #152685

    Sheri

    I chatted with kathrynwp, and she tells me the shift isn’t happening any more for her right now either. So I think it’s possible you modified your CSS after asking for help and then didn’t let us know you fixed the “shift” problem before I even had a chance to see it. If that’s the case, maybe the animation explanation is still interesting to you and you can just mark this thread as resolved. :)

    #152694

    crcgtpc

    Hello Designsimply !

    In fact I remove :

    #page {

    margin: 0 auto;

    }

    (like Katryn said to me)

    That’s why there is no bug now,but the website site is aligned to the left and not in center anymore.

    I test your solution with (#page { margin: 0 auto; } ) in order to see if it works well ! I’ll come back to you soon :)

    Thx a lot,

    br,

    E.

    #152747

    Sheri

    I test your solution with (#page { margin: 0 auto; } ) in order to see if it works well

    What I posted before isn’t relevant to any past CSS you removed before I saw your site. :)

    But if you’re still having trouble with horizontal shifts, I can look again. However, you must post a link to where I can see the problem in action.

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Applu to a menu title the same box style as the Connect and Search button’ is closed to new replies.