CODEWITHSUNDEEP
jqueryhtmlcss
Nikki_Heights
Nikki_Heights

Reputation: 115

Menu drops too far in mobile mode

I'm trying to build a responsive site, however, one of my divs is preventing the mobile view from displaying properly. When the navigation is clicked, the menu jumps too far down due to a top margin property of 102px. I need this margin set this way when the navigation is closed, but not when it's open. I think the only way to make this responsive site work is using jquery to fix the problem, but so far each technique I try doesn't have an effect. I'm still very new to Jquery, so I'm not sure what to do. Any help is very appreciated. Thanks.

JQUERY

var screensize = document.documentElement.clientWidth;

$(document).ready(function(){

    // check for window size size on page load and show relevant content only   
    $(window).resize(function () {
        var width = $(window).width();
        console.log(width);
        if (width < 600) {
            $('.link').hide();
        } else {
            $('.link').show();
        }
    });

    $('header').on('click', function() {
        $('.link').slideToggle(500);
        $('#G').css({'margin-top', '0'});
        e.preventDefault();

    });
});

Here is a fiddle - just resize the browser for the mobile view. I just want to decrease the amount of margin when the header is clicked on.

Upvotes: 0

Views: 70

Answers (1)

Ryan Fitzgerald
Ryan Fitzgerald

Reputation: 423

Can you provide us with a JSFiddle so we can see the structure of the page and how it works? Without that however, one thing I can suggest is checking for the navigation, and apply or removing css attributes if it is visible or not.

For example:

if ($('.link').is(":visible")) {
    // Apply css changes needed if nav is visible   
} else {
  // Apply css changes needed if nav is not visible   
}

Looking at your code (without seeing it in its entirety), I imagine something like:

if ($('.link').is(":visible")) {
    $('#G').css('margin-top', '0'); // Remove margin if nav is visible  
}

Also, as an additional bit of info, the curly braces are not needed within your .css call, take a look at this for more info on the use of .css()

JSFiddle: https://jsfiddle.net/q4mxt9od/

Upvotes: 1

Related Questions