Adding elements to a Sub Nav Element

The nav menu items also is listed with dots, why?

https://imgur.com/1haezJz

Hi there,

Where can I see that element?

How are you adding it?

Hi, I'm adding it to a hook element for a secondary nav menu.

I received this markup example from David, which is working fine, which I use as reference for adding other elements. It is working fine except from the count and the listing dots.

<li id="menu-item-1391" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1391 button">
    <a href="https://some-site.com/some-page">Søg</a>
</li>

Hi there,

Your HTML in the initial post is broken:

<li id="messages-personal-li" >
    <a id="user-messages" class="menu-item menu-item-type-post_type menu-item-object-post messages-personal-li button">
        <a href="https://domain/members/me/messages/">Beskeder <span class="count"></span>
    </a>
</li>

Try this:

<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>
</li>

Let me know :)

Hi there, sorry, but this markup only displays a dot.

Is there a specific page where I can see this?

Are you trying to add it as a regular menu item?

You can see it on the landing page now.

Yes, I am trying to add it as a menu item

Thanks

Can you show me exactly where you want it? Next to the mobile menu 3 bars? Inside the off canvas panel?

Sorry for the confusion of having both a secondary menu and a sub menu element, which was to show how I want my secondary menu hook element to look like: Three links contained and centered.

Why I'm going with the hook element solution, is because I want the activity count next to the message tab.

<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>
</li>

With this code added, it looks like this:
https://imgur.com/s0y8U1B

And you're wanting this HTML to render in the white bar with the current "Menu" item with the 3 bars?

In the light gray secondary menu element, for some reason it is not visible on the landing page, but you can see it here domain/frontpage

https://imgur.com/W3BqCP8

So what if you do this in the Hook Element:

<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>
        </li>
    </ul>
</div>

Any improvement?

Thanks for trying, the only change is that the dot is now contained

https://imgur.com/E1pah3t

You have this CSS added to your site:

a#user-messages {
    display: none !important;
}

You'll need to remove that CSS, or remove that ID from the <a> element.

Then you can add this CSS:

.sub-navigation ul {
    list-style-type: none;
    margin: 0;
}