+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Mobile Menu Issue in mobile view issue...

  1. #1

    Mobile Menu Issue in mobile view issue...

    Hello,

    Regarding my mobile menu,..In the screen sizes in which the flynax css changes the template in mobile is where I am having an issue with my navigation menu. If you notice when the navigation menu changes from the desktop to the mobile version (with the hamburger menu icon) the part of the menu that drops down when you click on the hamburger icon is inside the top part of the menu. I will attach a screen shot of what I mean that needs to be fixed like how the desktop version of the menu works, it's separate (two parts, instead of one part over lapping the other part) reason why I want it like the desktop version is because, for example, notice how close the list items are to the hamburger icon? Well, even worse is if I try to add a margin-top: 20px for example to lower it, the top part of the menu, where the hamburger icon is, will also drop down.

    Please see the attached screen shot to see the part that needs to be fixed.



    Brian
    Attached Images Attached Images
    Thank you - Your Welcome
    Brian

  2. #2
    still stumped on this one. Anyone have a suggestion? I've tried changing the position property in css but that didn't do it. Maybe something else needs to be changed, I will keep trying and if someone can give me another suggestion that would be great.
    Thank you - Your Welcome
    Brian

  3. #3
    I have tried renaming the original folder for the navigation menu, then re-uploading the original files and what I have noticed is that by replacing all the file for the nav menu, the issue is still there, so I am not sure if this is an issue in the html, or with the flynax template css file.
    Thank you - Your Welcome
    Brian

  4. #4
    Uggh! This is really getting to me. If anyone has any suggestions, feel free. I am up for anyone's guess.
    Thank you - Your Welcome
    Brian

  5. #5
    Hard to tell without seeing your site? I just looked at some Stellarnav docs and just taking a super wild guess here, but have you tried inserting a breakpoint in this area at the bottom of wherever you installed the navbar?

    Code:
    Only registered members can view the code.
    try adding to :

    theme: 'dark',
    position: 'right',
    breakpoint: 768px,

    Note your theme and position may be different and may not even be there at all.

  6. #6
    Quote Originally Posted by Justin Mueller View Post
    Hard to tell without seeing your site? I just looked at some Stellarnav docs and just taking a super wild guess here, but have you tried inserting a breakpoint in this area at the bottom of wherever you installed the navbar?

    Code:
    Only registered members can view the code.
    try adding to :

    theme: 'dark',
    position: 'right',
    breakpoint: 768px,

    Note your theme and position may be different and may not even be there at all.
    Hello Justin,

    Yes, I have the breakpoint it set. I will give you my website in a private message, check your pm.
    Thank you - Your Welcome
    Brian

  7. #7
    Okay so the menu works the same way on the stellar demo page where the dropdown is inside the navbar when open. I believe if you just want to move the list down further away from the hamburger, in stellarnav.css line 105, change:

    Code:
    Only registered members can view the code.
    to

    Code:
    Only registered members can view the code.
    or whatever you want.

  8. #8
    Quote Originally Posted by Justin Mueller View Post
    Okay so the menu works the same way on the stellar demo page where the dropdown is inside the navbar when open. I believe if you just want to move the list down further away from the hamburger, in stellarnav.css line 105, change:

    Code:
    Only registered members can view the code.
    to

    Code:
    Only registered members can view the code.
    or whatever you want.
    Ok,
    I understand that what your meant, it was on line 101, which is correct, but all-in-all that did not solve the issue though.

    let me explain: I have adjusted the top margin to 55px so when the menu is open, I noticed that the bottom part of the border was missing, but after looking again, when the selection (inspector in firefox) still selected, the menu was completely selected, so it's likely that the border is at the bottom of the menu. Meaning go ahead and add a 55px border to that code in the browser inspector, and notice that the border is missing from the top part of the menu, but I think, the border that is missing, is at the bottom part of the menu. How can we fix that?

    I have left the margin top at 55px so you just have to look in mobile to see what I mean about the border missing at the top part of the menu and if you try to add the border you will see that it doesn't apply to the missing area for some reason. :hmm:
    Last edited by Brian Jester; December 20, 2018 at 03:15 AM.
    Thank you - Your Welcome
    Brian

  9. #9
    If I understand you correctly, the bottom of the border is indeed there, it's just hidden behind the main-container wrapper. In order to see the border completely change line 76 in stellarnav.css from position: static to position: relative. Does that help?

    edit - and in my opinion it looks better if you remove the extra black border in the same spot and just have the white.
    Last edited by Justin Mueller; December 20, 2018 at 04:54 AM.

  10. #10
    Quote Originally Posted by Justin Mueller View Post
    If I understand you correctly, the bottom of the border is indeed there, it's just hidden behind the main-container wrapper. In order to see the border completely change line 76 in stellarnav.css from position: static to position: relative. Does that help?

    edit - and in my opinion it looks better if you remove the extra black border in the same spot and just have the white.
    Justin,

    I have adjusted the position, and it now has a large gap when opening the menu. Do you have solution for that? Otherwise, it's getting there, but that gap seems to be related to my original thought, which is when trying to adjust the margin to separate the menu from the hamburger icon, the bottom is stuck to it. Do you think you can fix that so the bottom part of the menu is outside the parent div? I think there may be inherit set for the position somewhere that is causing it.
    Last edited by Brian Jester; December 21, 2018 at 04:03 AM.
    Thank you - Your Welcome
    Brian

+ Reply to Thread