Question regarding changing the entire header background colour

Activello
1

Hi! I had posted earlier but resolved my issues with the ftp and know how to use it now!

I was able to move the menu under the logo, using one of the function files you had shared on a discussion post here. Now I want to do the following:

  • Add my logo image to the child theme so that it shows up on the blog (right now, the child theme is displaying just the name of the page and the tagline, but I want to add the image (the colour code is: #192231)
  • My logo image has a particular background colour - I want the entire header to have the same background colour (both the white space on either side of the logo) as well as the menu which is now under the logo

Please let me know how I might be able to achieve these two things

2

Hi @mphhelp,

Thank you for your question.

Could you please share me the child theme that you are using and your site URL where so that i can help you to achieve it?

Kind Regards,
Movin

3

Hi Movin,

I have attached the child-theme (zipped) here as well as a screenshot of the page - The site is not live yet as we are still trying out different designs.

I want two things:

  1. for the logo to be on the very top of the page with the menu options below it - the version I am using now doesn’t seem to have the slider option, but I’d like to see it with the slider
  • For our logo, we have two options - a coloured background or a white background - I want to try and see what the Blue background logo would look like against the same colour background on the header, with the menu underneath, and the slider underneath - so i think it would be helpful to know what the code is that could allow us to change the header background colour
  1. Can you help add the slider back in? It may have been that I used a child-theme that took out the slider.
  2. I also want to try and change the colour of the slider to the same evening colour

Thank you so much for your help :slight_smile:

4

Your shared child theme is a bit big so it is not getting downloaded and i am getting the error when i try to download it several times so could you please share it to me other way like using Google drive?

5

Hi Movin,

This is the link from which I got the child-theme: https://colorlibsupport.com/t/menu-bar-2/ (child-theme-74)

Again - want to try and change the header colour to #192231, as well as add the slider in if possible underneath the menu - but I do want to test different colours (white or the evening colour mentioned previously) on the header (ie. the menu and the header above the menu)

Let me know how I can bring the slider back and achieve the testing of different colours on the background - thank you!

6

I have tested the theme child-theme-74 shared on that topic and the slider is working fine for me as shown in the attached screenshot.

Please make sure you have configured the slider correctly as described on this page https://colorlib.com/wp/support/activello/

My logo image has a particular background colour – I want the entire header to have the same background colour (both the white space on either side of the logo) as well as the menu which is now under the logo

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#masthead, .navbar.navbar-default {
    background-color: #192231;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

7

Oh great, that worked very well! Thank you. :slight_smile: Is there a way to change the link colours (visited, hover, non-visited) but only for the header, ie. the nav bar, but not the main body of the page?

8
Is there a way to change the link colours (visited, hover, non-visited) but only for the header, ie. the nav bar, but not the main body of the page?

You can try achieving this using the below CSS code.

#page .navbar-default .navbar-nav li > a:hover,
#page .navbar-default .navbar-nav .active > a {
    color: #f32020;
}