How can I add a clickable link to my collapsable sidebar menu without breaking my code?

user_12221565 0
Viewed 149

Currently trying to make a sidebar on HTML/CSS however I am struggling to finalise it by adding clickable links for navigating around my site.

I believe it is a simple CSS issue or a simple HTML problem but it's driving me crazy!

<li class="c-menu__item has-submenu" title="Account">
    <div class="c-menu__item__inner"><i class="fa fa-cog"></i>
         <div class="c-menu-item__title">
             <a href="accountdetails.php"
                style="text-decoration: none"><span>Account Settings</span></div></a>
         </div>

Is what I have at the moment but there are two problems, I cannot click the button when the sidebar is collapsed, nor can I click the div the text/icon are present in, I must only click the text to get it to work.

Preferably I would like to click the box the icon, text are held in for easier usage.

How can I achieve this instead of just text being hyperlinked?

Photo showing the area I would like clickable on sidebar opposed to just the text

enter image description here

css html
2 Answers

This is because your anchor tag is wrapping only the text "Account settings". You should place your anchor tag in a way that wraps the elements that you want them to work like a link.

Also be aware that in the code you shared, you closed a div before closing the anchor tag, and you are not closing the list item tag.

Try like this:

<li class="c-menu__item has-submenu" title="Account" >
    <a href="accountdetails.php" style="text-decoration: none">
        <div class="c-menu__item__inner">
            <i class="fa fa-cog"></i>
            <div class="c-menu-item__title">
                <span>Account Settings</span>
            </div>
        </div>
    </a>
</li>
user_146359500

I see you closed </div> before a tag, But your a tag start just before your span tag.

Hence you need to close a tag before </div> like these:-

<li class="c-menu__item has-submenu" title="Account">
    <div class="c-menu__item__inner"><i class="fa fa-cog"></i>
         <div class="c-menu-item__title">
             <a href="accountdetails.php" style="text-decoration: none"> 
                  <span>Account Settings</span>
             </a>
         </div>
    </div>
</li>

Now, you don't want to show that your text is hyperlinked, in that case, you can use text-decoration: none; to solve your issue.

Thanks. HaPpY Codeing

user_79091020
Related