Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3144218
Header
Closed

Comments

  • Lordexeros started the conversation
    October 11, 2022 at 6:01pm

    Hello, 
    I have 4 questions regarding my website. 
    First, I tried this CSS code to modify my header a bit, but the offset and the thickness happened with a slight delay. How can you make it works?

        #navigation .menu > li > a:hover, #navigation .menu li.current-menu-item > a, #navigation .menu > li.current_page_item > a, #navigation .menu > li:hover > a, #navigation .menu > li.current-menu-ancestor > a, #navigation .menu > li.current-menu-item > a, #navigation .menu .sub-menu li a:hover, #navigation .menu .sub-menu li.current-menu-item > a, #navigation .sub-menu li:hover > a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-underline-thickness 3px;
    }

    Another question, I tried to do something similar as the header from Uber (https://www.uber.com/de/en/), in which the color background changes when we move on the header with the mouse. When I tried, I could not achieve the same because it took the whole size of the header and I was not able to add a space between the upper/lower side of the header and the background change. Also, it was not possible to have it aligned with the other part (the inactive part) of the header. It does not need to be 100% the same, but something similar would be nice. Maybe you have already helped someone with something similar.

    I tried hundreds of things but I wasn't able to find the mistake. Here is what I used: 

        #navigation .menu > li > a:hover, #navigation .menu li.current-menu-item > a, #navigation .menu > li.current_page_item > a, #navigation .menu > li:hover > a, #navigation .menu > li.current-menu-ancestor > a, #navigation .menu > li.current-menu-item > a, #navigation .menu .sub-menu li a:hover, #navigation .menu .sub-menu li.current-menu-item > a, #navigation .sub-menu li:hover > a {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    color: #FFFFFF;
    background-color: #000000;
    white-space: nowrap;
    }


    Third question:
    How can I change the size of the logo on the desktop and/or the mobile version of my website?

    Four question: 
    How can I make the sticky menu on both desktop and mobile slightly transparent?

    Thanks a lot for your help. This would be amazing. If it's not possible I will try something easier. 

    Kind regards,
    David Gotti 

  •  2,610
    PenciDesign replied
    October 11, 2022 at 10:25pm

    Hi,

    1. Please add the following CSS to your site:

    #navigation .menu > li > a:hover,
    #navigation .menu li.current-menu-item > a,
    #navigation .menu > li.current_page_item > a,
    #navigation .menu > li:hover > a,
    #navigation .menu > li.current-menu-ancestor > a,
    #navigation .menu > li.current-menu-item > a,
    #navigation .menu .sub-menu li a:hover,
    #navigation .menu .sub-menu li.current-menu-item > a,
    #navigation .sub-menu li:hover > a {     transition: 0.3s all ease-in-out; }

    2. You can change the header hover color by adding the following CSS code:

    #navigation:hover {
        background: #000;
        transition: 0.3s all ease-in-out;
    }

    3. Navigate to Appearance > Customize > Logo & Header > Logo: change the logo size at:

    - Set A Max Width for Logo

    - Set A Height for Logo Image

    4. Add the following CSS code to your site:

    .is-sticky #navigation {
        background: transparent;
        transition: 0.3s all ease-in-out;
    }

    Regards,
    PenciDesign.