Font color change in top navigation (Atomik template)

Hi,
pretty new to Concrete and found one problem: how to change the font color in the sidewide navigation bar? In the options we can change the background (great) - but no option to change the fonts. Having a dark background, black font color isn’t really “optimal”. Foud no way to change this (just for the navigation bar).

For the footer we can change background and text / link color. Great. But how to do the same for the top bar?

Didn’t find anything in the manual regarding this.

Thank you for any hint / help!

P.S.: Latest Concrete Version 9 and PHP 8.2

You can change the font or text color in the top navigation by:

1.) Click on the block and choose “Design and Template”

2.) Set the link or text color:

3.) Save those settings, save the block, then publish the page (on mine the block disappears after you save the block form, but if you just publish the page the changes are there.

Hi Evan and Thanks for your help!

Yes, I found this already. But if you change there the colour, the transparency (at the upper start of the site) is gone, hoover is gone, active page is gone. So, thats not the solution I searched.

I was searching (and unfortunately mixing around :wink: in the CSS, but obviousely I didnt find the right place to change :frowning:

It is great that one can change the background color of the navbar in the options. But without changing the font colour one only can use very bright colours for the background because of the dark font (bright hoover).

Thank you very much for your answer! If anyone has another solution without loosing the original behaviour → THX in advance!

ScreenShot 028 Screenshots
ScreenShot 027 Contact Us __ OF-Service - Chromium

You have clicked the background color icon instead of the text color icon. They are next to each other in @EvanCooper 's screengrab.

Hi,
no, the background color is the one I choosed in the options in the left hand panel “Customize Theme” and it is correct.

ScreenShot 033 Themes - Vivaldi

And no once again, I was in the right options field (“A”). Did it once again to show:

ScreenShot 032 Screenshots
ScreenShot 031 Home __ OF-Service - Vivaldi

If I do so, the link colour is as choosen. But transparency / hoover / active are gone and the navbar is fixed. Seems to change several other CSS and / or the whole navbar?

I just want to change the dark font colour to a brighter one because on this background it is nearly invisible.

I found the easiest way to do this was to create an override of the top_navigation_bar folder and create a templates folder in the application>blocks folder
(application>blocks>top_navigation_bar>templates)
Then copy the view.php file from the concrete>blocks>top_navigation_bar folder into the new templates folder and rename the file to something like newtemplate.php
Then at the top of the newtemplates.php file replace this:

<?php defined('C5_EXECUTE') or die('Access Denied.'); $c = Page::getCurrentPage(); ?>

With this:

<?php defined('C5_EXECUTE') or die('Access Denied.'); $c = Page::getCurrentPage(); ?>

<style>
a.nav-link {
color:rgba(0, 0, 0, .95)!important;
}
a.nav-link:hover, a.nav-link.active {
color:#75cfb8 !important
}
div.theme-atomik .transparency-enabled:not(.transparency-temporarily-disabled) .navbar-toggler .icon-bar {
background-color: #000;
}
</style>
You can then play around with the colors to suit your site and the file won’t get overwritten when you update concrete to a new version.

1 Like

Hi,
when I saw your post I was so happy - THANKS A LOT!

But unfortunately it doesnt work / change nothing in the navbar →

/public_html/application/blocks/top_navigation_bar/templates/newtemplate.php

content of newtemplate.php →

<?php defined('C5_EXECUTE') or die('Access Denied.'); $c = Page::getCurrentPage(); ?>
<style>
a.nav-link {
color:rgba(255, 238, 219, .95)!important;
}
a.nav-link:hover, a.nav-link.active {
color:#a8a8a8 !important
}
div.theme-atomik .transparency-enabled:not(.transparency-temporarily-disabled) .navbar-toggler .icon-bar {
background-color: #000;
}
</style>

<div class="ccm-block-top-navigation-bar" <?php if ($includeTransparency) { ?>style="display: none" data-transparency="navbar"<?php } ?>>
...

What did I do wrong or missunderstood? I cleared the cache too, but nothing changed.

ConcreteOwl, you should rename yourself in “ConcreteANGEL”!!! :wink:

Forget about my last post. I changed the Block Template from Default to Newtemplate and it works!!!

Thank you so much, Owl! Super, great help! Exactly what I was searching for (hours and hours in CCS).

You are the heroe of the day (at least mine)! Thank you so much!

Cheers

Happy Walhalla

Glad to have helped.
The best way to thank me is to mark my answer as the ‘Solution’
Cheers
ConcreteOwl

Really made me happy! :slight_smile: Found this "Solution now and marked as solution.

Great job :+1:t5:

And who wants to change the “branding” (left corner) too, can also add:

/* LINK BRANDING */
a.navbar-brand {
    color: #XYXYXY !important;
}

a.navbar-brand:hover {  
color: #XYXYXY !important; 
}

The last thing I am searching is change the colour of the language - changer on the right side. Still searching - but hopefully will find it too :wink: