Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 31, 2018 at 11:21 am #905512
    dezomat2

    Hi

    i want to style my Main Menu Items with different Background & Hover Color and a “static border”.
    I already found the Menu Item ID so i can style any menu item. Background Color, padding and border are fine, but how can i style the hover color?

    I also want the box which i create with border to be “static size” – im not sure if this is possible because the names of my menu items are different so “main” gets a smaller border then “products” simply because of the used letters. Do anybody know how i can do this?

    For seo reasons i will do that all with text instead of images :) or can i use images for background and hover too ?

    CSS i use at the momen :

    #avia-menu #menu-item-755 > a .avia-menu-text {
    border: 2px solid #0065a1;
    background-color: rgba(60, 59, 59, 0.8);
    padding: 60px 60px;
    }

    February 1, 2018 at 9:12 am #906062
    Rikard

    Hey dezomat2,

    Are you looking to only change the colour of the text? If so you can try CSS like this to style the hover state:

    #avia-menu #menu-item-755 > a .avia-menu-text:hover {
  your CSS here
}

    If you should need any further help then please post a link to your site so that we can have a closer look.

    Best regards,
    Rikard

    February 1, 2018 at 10:00 am #906096
    dezomat2

    Hey RIkard,

    yes i found where i have to add the css. My Question is how i can add a hover to the item in css? o is it maybe also possible to add a different background image to the item and a different hover to the item?

    February 1, 2018 at 10:01 am #906098
    dezomat2

    i guess its better when i use background image and hover image?

    February 1, 2018 at 3:30 pm #906339
    Rikard

    Hi,

    If you use the example CSS I posted, then it will target the hover state for the text in your menu item with that ID, could you try it out to see if it works? I’m not sure why you need to have background images on hover? Maybe it would be better if you posted a link to your site and tried to explain the problem there a bit further?

    Best regards,
    Rikard

    February 1, 2018 at 4:04 pm #906359
    dezomat2

    Hi Rikard,

    okay works great! i also need to reduce the the space between the logo and the menu. See in the Private Content Logo and Main Menu dont have much space between .. can i do this with enfold?

    February 1, 2018 at 4:06 pm #906361
    dezomat2

    See the website ->

    February 1, 2018 at 4:19 pm #906367
    dezomat2

    Plese see the private link

    i need to reduce the space between logo and menu via css and i also need to adjust the 2 images in the header. Im not sure how i can do that.

    Thank you for your help

    dezi

    February 2, 2018 at 5:48 am #906623
    Rikard

    Hi,

    Thanks for the links. It might be tricky to do so, but you can try to make the container smaller by adding this CSS:

    .av-logo-container {
  max-width:1000px !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.