Menu css class not working properly

  • Resolved mlgz0rn2

    (@mlgz0rn2)


    8 years, 2 months ago

    So i’m trying to add a css class to one of my menu items.
    But for some reason the css class gets added wrong, which makes it not working.
    I am trying to show the content of that menu item in a popup.

    <ul class="sf-dropdown-menu" style="display: none;">
	<li class="menu-april menu-item-930">
           <a href="http://gedevasevang.dk/maanedsblad/april/">
           <i class="modal-link"></i>April</a>
       </li>
</ul>

    The css class gets added as <i class=”modal-link”></i> which makes it not working.
    For it to work it needs to be within the link itself.

    Like so

    <ul class="sf-dropdown-menu" style="display: none;">
	<li class="menu-april menu-item-930">
             <a class="modal-link" href="http://gedevasevang.dk/maanedsblad/april/">April</a> 
        </li>
</ul>

    Is there somehow any way to fix this?
    Is it something on my page that is adding the css class in a wrong way?
    Or is this intended?

    Best Regards

    • This topic was modified 8 years, 2 months ago by mlgz0rn2.
    • This topic was modified 8 years, 2 months ago by mlgz0rn2.
    • This topic was modified 8 years, 2 months ago by mlgz0rn2.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • hannah

    (@hannahritner)

    8 years, 2 months ago

    Hi @mlgz0rn2,
    Sorry, I’m not sure I’m following. Can you link to an example of what you’re wanting?
    Thank you!

    Hannah

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    Alright let me try again :p
    I’m not sure if it’s related to the virtue theme.

    the css class i’m wanting to add, makes it so when you click a link/menu item and so, the content of that link will show up in a popup window.

    As shown in the image here img1

    I’m using the advanced setting under menus to add a css class to the item.
    img2

    But this adds the class like shown on this picture
    img3
    Because of that, it takes me directly to the link when clicked.
    img4

    If I then change it to how I want it to be in the chrome developertools, it works perfectly
    img5

    So to me, it seems like css classes are getting added in the wrong way to the menu items, using the advanced setting.
    Again, I do not know if this is virtue being the cause of it.
    But when ever I google how to add custom css classes to a nav item, it shows me to do it like I did, but they get different results.

    I hope this cleared things up abit on my issue 🙂

    • This reply was modified 8 years, 2 months ago by mlgz0rn2.
    Kevin

    (@jx-3p)

    8 years, 2 months ago

    Hey,

    With the theme, the CSS class is used to add icons to menus, see here:
    https://www.kadencethemes.com/add-icons-to-your-menu/

    Each menu item by default has it’s own unique CSS class though, so perhaps we could use one of those classes instead? (menu-april or menu-item-930)

    -Kevin

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    Hey @jx-3p how would I be able to do that?

    Best Regards

    Kevin

    (@jx-3p)

    8 years, 2 months ago

    In IMG 3 in your above post, take note of the classes that I pointed out, above where the “modal-link” class is being added. Try using one of the pre-generated classes.

    Does that work for you?

    -Kevin

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    The problem is, it’s a plugin I use to do the popups, which wants me to add that class to links/items and so on for it to show in a popup.
    It seems like alot of hassle if I have to take everything from that plugin and it’s css and add it to every single nav item I want it added too. When in theory I could just add 1 class.

    Am I completely wrong here, and misunderstanding what you are saying? 😀

    Kevin

    (@jx-3p)

    8 years, 2 months ago

    Ok, I understand what you need now. Sorry it took a moment! I’ll send this onto the theme developer so that he can provide a solution ASAP.

    -Kevin

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    Awesome! Thank you so much!

    Ben Ritner – Kadence WP

    (@britner)

    8 years, 2 months ago

    Hey,
    I see, the theme allows for icons and moves that custom icon input into an output for icons, see this demo: http://themes.kadencethemes.com/virtue2/

    I’ll update today with a check to see if it’s an icon that being added and if it isn’t to add that class into the right spot.

    Ben

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    Sounds good! Thanks for all the help!

    Thread Starter mlgz0rn2

    (@mlgz0rn2)

    8 years, 2 months ago

    Works great now! thank you so much

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Menu css class not working properly’ is closed to new replies.