• Resolved James_DG

    (@james_dg)


    I noticed that when changing the actual logos of the social icons the link colours and home link in the bread crumb get changed to the same colour due to the inheritance.

    – How do I solely change the colour of the logos (Facebook, Twitter, etc.) within the social icons, without affecting the other colours?

    Furthermore, how do I change the height of the logo within the header without messing up the layout? I managed to change it, but this affected the header’s layout when viewed from a smartphone. I would like to have the logo’s height to be similar to the header’s height.

    Well, thanks again! It’s highly appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • What is your website url ?

    Hi, To target a particular element, the selector needs to be “specific”. I think:
    .social-icons a
    should work, if not this is more specific still:
    #header .social-icons a
    To change colour, try:
    .social-icons a {background:#F00}
    When changing logo height, also make the width the same to keep them round, and change line-height to match to keep them central.
    .social-icons a {background:#F00; width:50px; height:50px; line-height:50px}

    Thread Starter James_DG

    (@james_dg)

    Once again thanks for the reply. When wanting to change the size of the logo, I meant I wanted to change the actual company logo – like the default Icy logo. So not the social logo’s..

    I would like to have the logo to be the same height as the header’s height. Ideally I would like to increase the logo’s width as well.

    Thanks again ??

    Hi, To upload your own logo, go to the Appearance menu item, Header option. I think the logo shows at 100% of its true size, so just upload one that is already the size you want. If not, you can set the logo size to say 200px with:

    #site-title a {width: 200px; height: 200px;
    background: url('https://www. etc use path to logo logo.gif') no-repeat;}

    To remove the border to the logo, adjust the padding on #logo element:
    #logo {padding:0}
    As Tejas asked, your website’s url would help diagnose issues.

    Thread Starter James_DG

    (@james_dg)

    Thanks both lorro and Tejas!

    I’m nearly done with the websites, however for some reason one of my pages doesn’t show up in the navigation menu. For that reason I included the link in the footer for now.

    How do I get it to show properly in the navigation menu?

    My website’s url is: https://www.mobiwebsite.nl/

    Cheer ??

    Hi James,

    Create a Menu with name Main or whatever you feel like by going to Appearance > Menu.

    After creating menu, just drag and drop pages from the left that you want to include on the menu. Arrange them as per your choice and save the menu.

    Assign this menu as Primary menu and save.. and you are done!

    Hope this will help you

    Cheers ??

    Tejas

    Hi, I think that’s difficult to diagnose without access to the dashboard, but here are some things to try in order of increasing desperation:
    – hard refresh the page (control-F5)
    – clear your browser cache
    – delete the menu item, save the menu, add the menu item again and save the menu again
    – delete all the menu, save it and recreate it
    – check the page is published
    – check that page visibility is set to public
    – deactivate all plugins, if the problem goes away, reactivate plugins one at a time
    – temporarily remove your custom css
    – temporarily use a different theme
    – check the php setting max_input_vars. Usually its 1000+ which should be enough for 60+ menu items but if its very small for some reason that would limit the number of menu items

    Thread Starter James_DG

    (@james_dg)

    Thanks once again lorro. It was caused by an obvious reason. Fore some reason I had the option automatically add pages to menu unchecked.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change colour social icons and the logo's height’ is closed to new replies.