There is a drop-down menu with tabs, with a resolution of less than 820px I need to change the tabs to links to other pages, that is, the block with the content of the tabs disappears and the tabs become links enter image description here

How can this be implemented? Can someone come across this? if the question is not completely understood, I will answer in more detail in the comments

    1 answer 1

    Use media queries to change the appearance. You can show / hide blocks depending on the screen width in pixels. You can change the appearance of the items in the drop-down menu.

    @media only screen and (max-width: 820px) { .legitRipple { color: lightblue; } }

    You can change the link using jQuery

     $(window).on('resize', function(){ if (screen.width < 820){ $('.active a').href = 'http://www.yoursite.com/news' } });

    • I had an option to push a link in the data attribute and then take it from there, a good option? and hang it all up at resize and track the width of the browser window - Artem Palamarchuk
    • Yes, if you need to replace several links at once. You can make two attributes and resize replace the link from the first or second, if you plan to use on mobile devices. - Viacheslav Soldatov
    • yeah, it means all the same I didn’t have any bad thoughts, thanks, I think the question is closed) - Artem Palamarchuk