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.

https://forum.flynax.com/attachment....tid=3003&stc=1

Brian

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.

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.

Uggh! This is really getting to me. :mad: If anyone has any suggestions, feel free. I am up for anyone's guess.

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.

Quote:

---

Originally Posted by Justin Mueller

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.

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.

Quote:

---

Originally Posted by Justin Mueller

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:

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.

Quote:

---

Originally Posted by Justin Mueller

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.

It appears that I fixed what I was after, but it still doesn't separate, but I think that is only in desktop view, but in any case, I like the way it appears now, but for another change would be awesome, which is in mobile, I would like to remove that Welcome Visitor, BUT ONLY in mobile because of the black background which I want to appear on the desktop view because it stands out, but for mobile, I would like the welcome visitor with the black background to be hidden, but I don't know what I should hide.

I have tried:

Code:

---

Only registered members can view the code.

---

But it still shows the Welcome Visitor on the mobile navigation menu. How can I make that not show in mobile, but keep it as is on desktop view?