Archived topic
Secondary navigation menu styling
8 replies · Started by Carsten on April 24, 2020
Hi there, now that my markup for the secondary-navigation is done, I need some styling advice.
I have been looking through all your styling suggestions, regarding buttons and Secondary Navigation, but they do not really fit to my site. I'm not sure about the button design yet, but I want the three links centered in one row, both on mobile and desktop.
1. Why do the links have button styling pr default, secondary nav customization color settings does not apply to these buttons?
2. How do I include the count in the button styling?
3. Is grid-container sub-navigation grid-parent the class I should use for styling?
Here is my markup:
<div class="grid-container sub-navigation grid-parent">
<ul>
<li id="messages-personal-li" >
<a href="https://domain/members/me/messages/" id="user-messages" class="menu-item menu-item-type-post_type menu-item-object-post messages-personal-li button">
Beskeder <span class="count"></span>
</a>
<?php echo bp_get_total_unread_messages_count( bp_loggedin_user_id() );?>
</li>
<li id="visitors-personal-li">
<a href="https://domain/members/me/visitors/" id="user-visitors" class="menu-item menu-item-type-post_type menu-item-object-post messages-personal-li button" >
Besøg <span class="count"></span>
</a>
<?php echo visitors_get_unique_visitors_count( bp_loggedin_user_id() ); ?>
</li>
<a class="button" href="https://domain/search">Søg</a>
</ul>
</div>Thanks
Hi there,
Where can I see that page? I'm not seeing it right now.
Let me know :)
Sorry, a display rule was set, it should be possible to see it now.
otherwise try domain/start.
One strange issue, only two of the three links are displayed on the frontpage and startpage, logged in or not, while all three are displayed on all other pages?
/* Passwords moved to admin */
You could do this:
.sub-navigation ul {
display: flex;
}However, you'll want to turn off the merged header or they won't display.
For the counts to display in the button, move the code that generates the count into the <span class="count"></span> element like this:
<span class="count"><?php echo bp_get_total_unread_messages_count( bp_loggedin_user_id() );?></span>
wauw, thanks a lot we're getting close now!
I haven't decided yet for the secondary menu background color, or if it should have a color, the same with the buttons.
I like the gray color of the buttons, but instead of making the buttons full width, the right solution must be making the buttons background transparent and the nav menu background gray.
Apparently I can't control these settings in the customizer, but will need som custom css ?
If yes, I can manage that.
Next step is to reorder the header content.
This is the order I want:
Back button, widget added with shortcode in element (left),
Logo(center),
and Mobile Menu(right)
From what I remember, this is not done with a flex box?
Thanks
The back button is inside the menu toggle, so it won't work/can't be moved around.
How are you adding it right now?
Right now it is added by a shortcode inside a hook element.
I'm using Navigation as Header
I skip the idea of having the back button in the navigation header, and place it in another place.
Thanks for looking into this
