Shop Categories

X

Changing hover menu box color and more

Home Forums Agama Pro Changing hover menu box color and more

Topic Resolution: Resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #6344
    alibi2017
    Participant

    Hey!
    I would like to know how can I change the hover menu box color, in my case from white, as is the header colour, to black (with transparency). In the same I wanted to change that specific font from black(as is in the Header) to white.

    Also I would like to know if its possible to have one logo on the main page and have a different logo for the rest of the website (and if i can change the font of the header only for the front page)

    I leave a screenshot of the hover menu I want to change and a link to the site

    Thanks in Advance!

    https://prnt.sc/gsd1hq

    http://teste1.alibi.pt/

    #6354
    Zex
    Moderator

    Hello, Alibi!

    Add, the CSS code below into Customizing ▸ General▸ Additional CSS

    code:

    /*
    -White menu links on homepage
    -Different font-family for the homepage header navigations only
    */
    body.home.page #masthead .agama-primary-nav a {
    color:white;
    font-family: Arial;
    }
    
    /*
    -black,semi-transparent sub-menu 
     background color
    -removed borders
    */
    ul.sub-menu, .sticky-nav li ul li, .sticky-nav ul li ul li {
    
    background: rgba(0, 0, 0, 0.1);
    border:none!important;
    }
    
    /*
    -Add custom logo to the home-page only
    */
    
    body.home.page #masthead .logo{
    
    content:url(https://upload.wikimedia.org/wikipedia/commons/0/0e/Atlanta_Zoo_Panda.jpg);
    }

    https://prnt.sc/gsqt06

    Regards

    #6355
    alibi2017
    Participant

    Hey Zex!
    The Sub menu Worked! 😀

    Unfortunatly the logo does not change with the code :/

    Is it possible to keep having the text highlight in the menu area?

    Thanks!

    #6356
    Zex
    Moderator

    Hi,
    for the hovering primary menu,

    add, the CSS code below into Customizing ▸ General▸ Additional CSS

    code:

    body.home.page #masthead .agama-primary-nav a:hover{
    color:red;
    }

    change the color per your wish.

    …for the custom logo,

    I checked your site and found that you have successfully replaced the logo on the homepage

    https://prnt.sc/gsryf1

    Best Regards

    #6357
    alibi2017
    Participant

    Hey Zex!

    Turns out forgot to whipe my cache! ahaha

    Thanks!

    #6367
    alibi2017
    Participant

    Hey Zex!

    Actually I noticed a small bug in the code! It does work in Chrome, but the logo remains the same in Edge and Firefox! I still have to try it in Safari!

    Thanks!

    #6377
    Zex
    Moderator

    Hello, Alibi!,

    Thank you for the note.
    I have found the way to solve this.
    Try to substitute old code for the logo, with new one (below)

    code:

    /*
    -Add custom logo to the home-page only
    */
    
    body.home.page  #masthead .logo{
    visibility:hidden;
    }
    
    body.home.page  #masthead .pull-left a{
    background:url("http://teste1.alibi.pt/wp-content/uploads/2017/09/A-1.png") ;
    background-repeat: no-repeat;
    background-size:auto 100%;
    }

    So your code on the end should be like this:

    https://prnt.sc/gtyat8

    Best Regards

    #6384
    alibi2017
    Participant

    Hey Zex!

    Thanks for the code, i just need to push the logo a little bit lower as i have set it at 80% and it sticks to the top of the header!

    Cheers!

    #6388
    Zex
    Moderator

    Hi,

    You just need to add margin-top: 15px; line
    into the code above,
    so your code will look like this:

    body.home.page #masthead .pull-left a {
        background: url(https://teste1.alibi.pt/wp-content/uploads/2017/09/A-1.png);
        background-repeat: no-repeat;
        background-size: auto 80%;
        margin-top: 15px;
    }

    change the margin-top value per your wish.

    Regards

    #6417
    alibi2017
    Participant

    Hi Zex!

    I have a follow up on the home page logo, when i go to the mobile version of the website the logo remains on the left of the screen!

    Thanks in advance!

    #6422
    Zex
    Moderator

    Hi, Alibi!

    If you want to center your logo on the homepage, try to add the code below, into:
    Customizing ▸ General▸ Additional CSS

    code:

    @media screen and (max-width: 992px){
    body.home.page  #masthead .pull-left a{
     margin-left:43%;
    }
    }

    https://prnt.sc/gvxmg1

    Regards

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