Active links menu problem
Hello, I created a menu like you did lately, a bit like Lucid's native menu. Everything works fine except:
1. I can not get the menus centered
2. The different color is missing for active links.
Did you add css here on unacms.com to do that?
-
- · Pethol
- ·
/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. -
-
·
LeonidS
- ·
Hi Baloo!
It your first post as an answer to the post, which is missing now?
-
·
LeonidS
-
- · Baloo
-
·
In reply to LeonidS
- ·
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.
-
-
·
LeonidS
- ·
Hello Baloo!
Every menu item contains the name of "menu object". Like in the following:
<ul class="bx-menu-custom bx-menu-hor bx-menu-hor-inline bx-menu-object-bx_timeline_menu_item_meta bx-clearfix">
So it's enough to find a proper object and describe it separately in Stuido->[Template]->Styles->Custom Styles area
-
·
LeonidS
-
- · Baloo
-
·
In reply to LeonidS
- ·
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.
-
-
·
LeonidS
-
·
In reply to Baloo
- ·
It will be like
.bx-menu-object-Test a {
parameters
}
-
·
LeonidS
-
- · Baloo
-
·
In reply to LeonidS
- ·
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.
-
-
·
LeonidS
-
·
In reply to Baloo
- ·
I guess you need to add :active, :hover and :visited arguments like:
bx-menu-object-Test a:hover
-
·
LeonidS
-
- · Baloo
-
·
In reply to LeonidS
- ·
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. -
-
·
LeonidS
-
·
In reply to Baloo
- ·
Active menu link has the bx-menu-tab-active class. So you may try to add more settings to this one.
-
·
LeonidS