[richsteer]

Hi.

I am using RockStar theme for my website, which I love. I have 6 questions if someone could help me with please:

1. I would like to change the colour of the top menu so that the chosen page and the hover page shows a colour of #ffa100 – At the moment it is red. How do I do this?

2. I have also managed to change the home page so that it is a fixed colour of #131787, however how do I make it so that it is transparent at first glance and the main header only turns #131787 when scrolling down.

3. How do I change the colour of the other menu options which are currently white to another colour (e.g. #000000)

4. How do I change the scroll up arrow that appears when you have reached the end of the website from red to #131787 ?

5. How do I change the colour of the text at the bottom of the page from black to #131787 (This was inserted using the option of a Text Widget in Footer 1.

6. Finally how do I change the colour of the LinkedIn & Twitter Logo’s from Red to #ffa100

I am using the free version, and if possible I do not want to upgrade to the pro version and wondering if there is any CSS code I can put in.

At the moment I haven’t amended anything (other than the normal wordpress plugins) except for the following CSS, which I have found searching through the forums here:

#masthead { background-color: #131787; }
.header-bg #masthead {
background-color: #131787;
}
.entry-title {
display: none;
}

Thanks.
Richard.

P.S. My website url is: http://www.kingdomhr.co.uk

[Skandha]

@richsteer: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

To change the color of the active page and menu item on hover

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
	color:#ffa100;
}
.main-navigation li:hover > a, .main-navigation li.focus > a {
	color:#ffa100;	
}

To make header transparent and show background only when scrolling down

.site-header {
	background:none !important;
}
.site-header.is-sticky {
	background:#131787 !important;
}

To change color of other menu options which are currently white

.main-navigation a {
	color:#000;
}

To change the color of to top button

.backtotop:hover, .backtotop:focus {
	background-color:#131787;
	border-color:#131787;
}
.backtotop {
	border:2px solid #131787;
	color:#131787;
}

To change color of the text-widget at the bottom

#text-3, #text-3 a {
	color:#131787;
}

It is not possible to change the color of LinkedIn and Twitter logo as it seems you have used a .png image for that purpose.
You can check out the additional-features available in the pro version of the theme and make your decision to upgrade.

Let me know if the CSS code work out.
Regards,
Skandha

[richsteer]

Hi Skandha.

Thanks very much – the codes work.

However when I put the transparent code in that you gave, it makes every single page transparent to start with – which makes the heading impossible to view. I would like it so that it only is transparent and turns to a solid colour on the home page – on all other pages it is a fixed colour.

What is the code for this?

Thanks

ALSO

A: I’ve noticed that when looking at the website on a mobile the ‘MENU’ button is still red when clicked – how do I change this to #ffa100

B: When looking at all of the site on a mobile sometimes the words get chopped in half and a – is put inbetween the word. This doesn’t look that great, and is there any way this can be changed so that on a mobile it always is left-aligned and full words shown.

Thanks

[Skandha]

@richsteer: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

Make header transparent only on the homepage

.home .site-header {
	background:none !important;
}
.home .site-header.is-sticky {
	background:#131787 !important;
}

To change the color of MENU button in mobile view

#menu-toggle:hover, #menu-toggle:focus {
	color:#ffa100;
}

To remove -(hyphens) used to break words

.entry-content {
	hyphens:none;
}

Let me know if this works out.
Regards,
Skandha

[Author]

Posts