My website, Lemendu, features two CSS classes called "redback" and "greenback" which correspond to the top-menu sections "ESPAÑOL" and "FRANÇAIS". I want these classes to be displayed on the right-hand-side, but I am facing an issue with media queries. When the width of the screen is under 767px, the alignment of these classes is not as desired. I need them to line up vertically with the other menu items without any padding or margin. However, directly changing the CSS classes in each screen size of my media queries file will cause compatibility issues.
The only solution I have found so far is to adjust the CSS classes directly in my jQuery file to remove any padding. But since I am new to jQuery coding, I am seeking guidance from experts in this field.
Below are the CSS classes in question:
.redback {font-size:15px; color:#1b1c1e; padding:0px 10px 0px 120px; font-weight:400; width: 50px; position: relative; }
.greenback {font-size:15px; color:#1b1c1e; padding:0px 20px 0px 10px; font-weight:400; width: 50px; }
And here is the jQuery code:
jQuery(document).ready(function(){
jQuery('#nav-button').click(function() {
jQuery('#options li').toggle();
});
if ( jQuery(window).width() < 767) {
jQuery('#options li a').click(function() {
jQuery('#options li').hide();
});
}
jQuery(window).resize(function() {
if ( jQuery(window).width() < 767) {
jQuery('#options li a').click(function() {
jQuery('#options li').hide();
});
if ( jQuery(window).width() > 767) {
jQuery('#options li').show();
jQuery('#options li a').click(function() {
jQuery('#options li').show();
});
}
});
});
I would greatly appreciate any suggestions or assistance you can provide. Thank you in advance for your help.