Active links menu problem

/modules/boonex/protean/data/template/system/_sub_header.html

<bx_include_auto:_header.html />


<div class="bx-main">


    <bx_injection:top />


    <div id="bx-toolbar" class="bx-header bx-def-image-bg-header bx-def-color-bg-header bx-def-border-header bx-shadow-header bx-def-z-index-nav">
        <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
            <div class="bx-toolbar-content-wrapper bx-content-padding-header">
                <div id="bx-toolbar-content" class="bx-clearfix">

<!-- LEFT SIDE [Everything after this div is centered] -->
                    <div id="bx-menu-toolbar-1-container">
                        <bx_menu:sys_toolbar_site /> 
                    </div>

<!-- MIDDLE SIDE -->
                    <div id="bx-logo-container">
                        <bx_injection:injection_logo_before />
                            
            
                        <bx_injection:injection_logo_after />
                    </div>

<!-- RIGHT SIDE -->
                    <div id="bx-menu-toolbar-2-container">
                        <bx_menu:sys_toolbar_member />
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    <bx_injection:injection_between_cover_logo />

<!-- The most annoying cover [can be removed] -->
    

    
    <bx_injection:injection_between_cover_top_menu />
    
    <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-def-color-bg-sec">
        <div id="bx-menu-main-bar" class="bx-menu-main-bar bx-def-padding-sec-leftright bx-def-box-sizing">
            <bx_injection:injection_top_menu_before />
            <bx_menu:sys_site_submenu />
            <bx_injection:injection_top_menu_after />
        </div>
    </div>
    
    <bx_injection:injection_between_content_menu />

<-- Menu under Cover -->
    <div id="bx-content-wrapper">
        
        <div class="bx-page-wrapper bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
            <div id="bx-content-container" class="bx-def-padding-sec-left bx-def-padding-sec-right">
                <bx_injection:injection_content_before />
                <div id="bx-content-main" class="bx-def-margin-sec-topbottom">

At least this is what I have figured so far.

Hello Leonid, well if I do this, the menus are well centered ok.
ul.bx-menu-hor {
   text-align: center;
}

But the problem is that another menu obeys the same rule, however, it is a vertical menu.

Hello Leonid,

So in my case ...

<ul class="bx-menu-hor bx-menu-object-Test bx-clearfix"

.bx-menu-object-Test {
text-align: center;
line-height: 2.5rem;
height: 2.5rem;
}

Very well I understood how to affect only my menu. Now, I do not know how to make sure to change the color of the active link. thank you.

Hello Leonid, in fact I think that I express myself badly. Specifically, I would like the menu item to be active on the current page.

bx-menu-object-Test  a {

color: #666666;

} Color well the element in black at the time of the click, but resumes its color once the page loaded.

Well thank you Leonid, but I tried all the solutions with the css, I do not think we can solve the problem with the css only. a: visited if I understand correctly checks if the link is already present in browser history, a: active changes the color just at the precise moment where link is clicked but not after loading a new page. I think the browser has no way of knowing what the active page actually is. So I think something has to be done in the code to do that. Correct me if im wrong.
As we can create menus, and like all the other horizontal menus indicate the active page, well the custom menus should work as well as it seems to me. For me it's a gap.