Return to previous page

Finishing touches to website - by filiphdan

This topic has 23 replies, 4 voices, and was last updated 8 years ago ago by Rose Tyler

  • Avatar: filiphdan
    filiphdan
    Participant
    May 31, 2017 at 15:32

    Hello,

    Im now doing the final touches to my website, and i would like to improve a litle bit the menu, i wanted to have the underlining a little bit darker and also wen the submenu apears and they display the several product categories and i hoover the mouse over each one is it possible to change them from the grey to a darker color, because this way the user does not get any informations wen hovering…

    Also is it possible to have some sort of underlining below all the menu, so it have s a litle bit more separation and looks better?

    Thanks!

    #164684 Copied Theme version: last WooCommerce version: latest version
    22 Answers
    Avatar: filiphdan
    filiphdan
    Participant
    May 31, 2017 at 15:33

    Forgot to mark email reply, Thanks!

    #164685 Copied
    Avatar: maxmullins
    Max Mullins
    Participant
    May 31, 2017 at 16:10

    Hello @filiphdan

    Please test following lines in custom.css:

    #menu-menuprincipal-1   li a:hover:after{background-color:red!important;}
#menu-menuprincipal-1 .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{background-color:#151212}

    Regards,
    Max Mullins

    #164687 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    May 31, 2017 at 16:55

    the first line worked, i changed color to black, but if you can give me the yelow color reference you use in the kids store template i could also try it, one thing is that the responsiveness of the menu is not the best…

    The second line dosnt seem to do anything…

    thank you

    #164694 Copied
    Avatar: maxmullins
    Max Mullins
    Participant
    May 31, 2017 at 17:34

    Hello @filiphdan,

    1.As is see you have found the way to change menu colors.
    2.You may use any colorpicker tool online. The yellow color of the slider is:
    rgb(243, 230, 22);
    3. Please provide us with screnshot of clarify your request about responsivnes issue.

    Regards,
    Max Mullins

    #164708 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    May 31, 2017 at 17:45

    The responsiveness is just sometimes wen you hover the menu the underline does not apear, you can test it just going to the website and hovering the menu.

    Still this line:

    #menu-menuprincipal-1 .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{background-color:#151212}

    for the dropdown menu did not do anything…

    Thanks

    #164710 Copied Theme version: last WooCommerce version: latest version
    Avatar: filiphdan
    filiphdan
    Participant
    May 31, 2017 at 17:48

    Ho, ok i see there is already set up for the underline/selection in the dropdown menu 🙂

    I think thats maybe to much, i just wanted the letters changing from grey to black if possible…

    Thanks!

    Edit – thats weird i dont seem to find the css code for the dropmenu underline/selection…i was going to try to costumize it..

    #164711 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    June 1, 2017 at 17:43

    Hello,

    If you want to change just the color of the text then use color:#000 instead of the background color.

    Regards

    #164819 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 1, 2017 at 17:51

    Hello,

    From the code you gave me only this was working and its in the custom css:
    #menu-menuprincipal-1 li a:hover:after{background-color:black!important;}

    I just need the dropdown menu to change the product categories names only wen hovering to black.

    At this moment it is creating a black box wen hovering, just check chipncharge.pt please.

    Thanks

    #164823 Copied Theme version: last WooCommerce version: latest version
    Avatar: maxmullins
    Max Mullins
    Participant
    June 1, 2017 at 18:06

    Hello @filiphdan

    You may add following code for dropdown menu links in the custom.css or style.css of the child theme:

    #menu-menuprincipal-1 .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{
color: rgb(234, 10, 10);
}

    Regards
    Max Mullins

    #164826 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 1, 2017 at 18:15

    Again that code does not seem to be doing anything, i dont know if someone from you added the css code in other place, because it makes no sense, i cant understand why is the black box apearing in the dropdown menu…

    I usualy go to apearence and customize css, i dont know were is the other place…

    Thanks

    #164829 Copied Theme version: last WooCommerce version: latest version
    Avatar: maxmullins
    Max Mullins
    Participant
    June 2, 2017 at 10:23

    Hello @filiphdan

    This is the part of code which contains black box hover efect for dropdown:
    #menu-menuprincipal-1 .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{background-color:#151212}
    This part contins code for hover effect of the dopdown links text color only you asked 

    #menu-menuprincipal-1 .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{
color: rgb(234, 10, 10);}

    The reuslt screenshot of this code added in to the custom.css: http://prntscr.com/fezugy Please provide us with wp-admin credentials check if any errors occurs during adding this line.

    Here you may read the article about how to change hover color of any element to custom via CSS:
    https://www.w3schools.com/cssref/sel_hover.asp

    Regards,
    Max Mullins

    #164862 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 2, 2017 at 10:36

    Hello,

    Im sory but it is still not working…It still ads a black box to the dropdown menu selection instead of selecting only the product letters…could you check it pleas?

    Thanks

    Please, contact administrator
    for this information.
    #164863 Copied Theme version: last WooCommerce version: latest version
    Avatar: maxmullins
    Max Mullins
    Participant
    June 2, 2017 at 11:20

    I have replaced code in custom.css. Please check.

    Regards,
    Max Mullins

    #164867 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 2, 2017 at 18:44

    Thanks max that was exactly what i wanted, just one detail, wen you scroll down, the menu that comes down is not doing this, in there wen you hoover and it cames the dropdown menu the products are already black, i dont know if its possible to change it to do the same as the menu does.

    Also one thing is that the yelow bar in the top of the page, wen i scroll down does not stays fit to the top, instead it leaves a small space, is it not possible to have it joined to the top of the page?that litle gap is just not necessary…

    Thanks!

    #164916 Copied Theme version: last WooCommerce version: latest version
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    June 3, 2017 at 09:35

    Hello,

    1)Check the fixed header drop-down now, please. Is it ok?
    2) Bordered version is enabled in Theme Options, that’s why you have the border http://prntscr.com/ffd87a If you don’t like the border you can disable it in Theme Options > General > Layout > Site Layout > choose “Wide”.

    Regards

    #164936 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 3, 2017 at 14:13

    Hi,

    I like the bordered version, but i dont like the border on the top…any way to remove that?

    The dropdown is working now 🙂 but could you let me know were are you changing the css?
    i was mayby thinking of puting the product letters to black and then use the box selecting has it was before in black but in a light gray, i dont know why but wen i tested it yestarday at nigth it was like that and i liked it even more.

    thanks

    #164943 Copied Theme version: last WooCommerce version: latest version
    Avatar: filiphdan
    filiphdan
    Participant
    June 6, 2017 at 10:04

    …

    #165055 Copied Theme version: last WooCommerce version: latest version
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    June 6, 2017 at 17:34

    Hello,

    It’s possible to remove the top border by additional customization only. The same for the menu items. If you want to get black color for the background then you should edit the CSS code that you have in your custom CSS and add the background. I’m sorry but I can give you the point to the right direction but we can’t do the individual customization if you are not sure what exactly you want more.

    If you need help with individual customization WPKraken team will help you, just submit a request.

    Regards

    #165116 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 6, 2017 at 17:42

    I understand that , thats why i asked were you were changing the css, because im using the personalize tool wen i visit my webpage, and in there i go to aditional css.

    Sometimes it seems that what its there is not the same that is displaying in the website…maybe its just me that im new to css…

    #165124 Copied Theme version: last WooCommerce version: latest version
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    June 7, 2017 at 17:22

    Hello,

    Ok. Code to change the hover bg for the link
    .menu .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{background-color:#0e0e0e;}

    code to change the hover link color
    .menu .item-design-dropdown .nav-sublist-dropdown ul > li > a:hover{color:#0e0e0e;}

    Regards

    #165236 Copied
    Avatar: filiphdan
    filiphdan
    Participant
    June 8, 2017 at 10:23

    Perfect, thank you very much!

    #165274 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 8, 2017 at 12:54

    Hello,

    You’re welcome!

    Regards

    #165301 Copied
  • Viewing 23 results - 1 through 23 (of 23 total)

The issue related to '‘Finishing touches to website’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
NFT Crypto Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme
lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Restaurant – WordPress Theme
lazy-placeholder
Niche Market 03 – Multivendor WP WooCommerce Theme
lazy-placeholder
Books Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Business – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.