[Resolved] Secondary navigation menu styling

Home Forums Support [Resolved] Secondary navigation menu styling

Home Forums Support Secondary navigation menu styling

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1254036
    Carsten

    Hi there, now that my markup for the secondary-navigation is done, I need some styling advice.

    View post on imgur.com

    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

    #1254329
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Where can I see that page? I’m not seeing it right now.

    Let me know 🙂

    #1254350
    Carsten

    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?

    #1254353
    Carsten

    /* Passwords moved to admin */

    #1255240
    Tom
    Lead Developer
    Lead Developer

    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>

    #1255306
    Carsten

    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

    #1255721
    Tom
    Lead Developer
    Lead Developer

    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?

    #1255975
    Carsten

    Right now it is added by a shortcode inside a hook element.

    View post on imgur.com

    I’m using Navigation as Header

    #1256042
    Carsten

    I skip the idea of having the back button in the navigation header, and place it in another place.

    Thanks for looking into this

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.