Home › Forums › Basel support forum › MENU

MENU

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 13, 2021 at 2:23 pm #306420

    Unissima_Comopi
    Participant

    Hi.
    I want the menu with the letters in white and when the mouse passes over it with the color # cbad73
    Furthermore, is it also possible when doing scrol inverter from white to black? And keep the background bar white?

    Feedback from I’m waiting.

    Thanks.

    Regards,
    Sara Rodrigues

    July 13, 2021 at 11:11 pm #306462

    Elise Noromit
    Member

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    Please add this code to the Theme Settings > Custom CSS > Global for sticky header:

    body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:yellow;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a{
color:blue;
}
body .main-header.header-has-no-bg.act-scroll .menu > li > a:after{
color:blue;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:yellow;
}
body .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: white;
}
body .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: #f7f7f7;
}

    Please replace the colors as per your needs.

    This code would replace the color of the menu item on shower: 

    body .main-header.header-has-no-bg .menu > li > a:hover{
color:yellow;
}

    If you have any questions please feel free to contact us.

    Best Regards

    July 14, 2021 at 9:52 am #306566

    Unissima_Comopi
    Participant

    Hey! Thanks for the answer.
    Is it possible to put the menu letters on all pages in white except for the house? I mean it’s before you scrol.

    Thank you.

    Best Regards

    July 14, 2021 at 2:04 pm #306675

    Elise Noromit
    Member

    Hello,

    You will need to CSS snippet one for all pages, you can use that one I provided above another one with home page class:

     body.home .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: red;
}
body.home .main-header.header-has-no-bg.act-scroll {
    background-color: red;
}
body.home .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:yellow;
}

body.home .main-header.header-has-no-bg.act-scroll .menu > li > a{
color:blue;
}
body.home .main-header.header-has-no-bg.act-scroll .menu > li > a:after{
color:blue;
}

body.home .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:yellow;
}
body.home .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body.home .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: white;
}
body.home .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: #f7f7f7;
}
body.home .main-header.header-has-no-bg .menu > li > a:hover{
color:yellow;
}

    If you have any questions please feel free to contact us.

    Best Regards

    July 14, 2021 at 2:40 pm #306688

    Unissima_Comopi
    Participant

    Hi. Thanks. But what I wanted was before I scrol, to put the menu letters in white on every page except the menu. It’s possible?

    Thank you.

    Best regards.

    Attachments:
    You must be logged in to view attached files.
    July 14, 2021 at 10:47 pm #306732

    Elise Noromit
    Member

    Hello,

    Have you added both CSS blocks I have provided?

    The first one is for all the pages the recent one is for the home page only.

    Please add both and check.

    Best Regards

    July 16, 2021 at 10:25 am #307084

    Unissima_Comopi
    Participant

    Hello thank you. Yes and it works. What you really want is to change the color of the letters in the menu BEFORE making the scrol. So when I open the pages I want the menu to appear in white instead of black.

    I wait for an answer. Thanks.

    Best Regards

    July 16, 2021 at 11:20 pm #307200

    Elise Noromit
    Member

    Hello,

    Please try this code: 

    body .main-header.header-has-no-bg .menu>li.current-menu-item>a{
color:yellow;
}

body .main-header.header-has-no-bg .menu > li > a{
color:blue;
}
body .main-header.header-has-no-bg .menu > li > a:after{
color:blue;
}

body .main-header.header-has-no-bg .menu > li > a:hover{
color:yellow;
}

    Best Regards

    July 19, 2021 at 10:50 am #307510

    Unissima_Comopi
    Participant

    Hi. Thank you very much, it worked!

    Is it also possible to move the menu a little further to the left? And besides adding the social media icons to the left side of the menu as well? (As shown in the photo)

    Best Regards,

    Attachments:
    You must be logged in to view attached files.
    July 19, 2021 at 7:51 pm #307616

    Elise Noromit
    Member

    Hello,

    I do not think so, there are social icons, I do not see the space where to move.

    Please clarify.

    Best Regards

    July 22, 2021 at 3:44 pm #308143

    Unissima_Comopi
    Participant

    Hi.

    Yes, I understand this view. In that case it is not necessary. But is it possible to make the menu a little more left-aligned?

    The idea is to put it even in line with the magnifying glass (as shown in the attached image).

    Thank you.

    Regards,

    Attachments:
    You must be logged in to view attached files.
    July 22, 2021 at 6:12 pm #308170

    Elise Noromit
    Member

    Hello,

    As soon as you move your site to the live platform I will check if we can do it with CSS.

    I cannot do anything while your site is on the local host.

    Best Regards

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)