Thank you, it works fine. I would like to style the hamburger menu. I tryed youtube tutorials but no luck. can you help me please? thank you, frank
There are some examples here that are basically copy and paste (html, css and JS). i just copied them into your page and once your original classes were added it worked oK. You will have to remove the positioning etc and just use the styles that relate to the icon you choose.
Here’s your code with a different effect hamburger added:
However you seem to be using code that still has broken parts in it. The code I gave you in post #81 is the validated code and the one you should base your examples from as a starting point.
I would suggest you do not duplicate the login and sign up links as I have shown a few times not that we can get the desired look by using the correct html.
Anyway if you look at my codepen you should get a rough idea of how to style the hamburger but I suggest you just play around with the demos on the site I linked to understand them better. Unless of course you just wanted a simple colour change and then you could do that easily yo your existing icon code.
Thank you
The reason for this menu is that my menu is long and I try something to fit properely, that is how I ended up with this hocuspocus. I know it is creasy, but I couldn’t get anything better. The hamburger icon is realy nice, just a bit complicated.
thank you
Hi
I am back again with a question regarding #81, am I making mistake adding a .navcustom class with border-radius zero, min-height:105px(stable height, no jumping on reduceing window width).Also, I think I need to change navbar inverse to default if I want to style, add colours, etc. By the way I noticed as I collapse window your navbar doesn’t have a line clicking on hamburger icon, mine one does, menu001.html, I do not understand why? Is it a problem or faulty code?thank you, frank
this is te codepen code
That’s bootstrap defaults and if you don’t want them remove the class (navbar-default or navbar-inverse). Adding one or the other still means you need to re-style if you want your own rules. Navbar-default is the default look and inverse is the inverse 
. If you remove the class then you can start afresh with a blank canvas but chances are you will not style it as well as the default methods.
If its just a few color changes then use the class nearest to the appearance you want and then modify it from there.
I couldn’t see what you mean by a line? I have a hard time seeing anything on the inverse layout anyway as contrast is minimal.
Hi
thank you for answer.I mean menu001.html , if I compare with your code. your code doesn’t result line clicking on hamburger icon(menu already collapsed) as it happens with mine. by the way, I just use fixed position for width more then 768px, for larger screen, controlled by @media query, for smaller I prefer static or relative to be scrollable, taking up less space. also you mentioned duplicate second ul as side menu is not a good idea. I tryed to control the layout with css order but it looks complicated. I’ve seen similar layout, but it looks complicated to replicate, get it. also if I add the code I have to customize, is it ok? or I will have problems again. I think I need to ask this thing to save time and hassle. i think i posted menu001.html, but i can post again.
i am posting an older version of my experiment, addad footer, still with duplicated topside nav that i can change. thank you, frank
thank you, frank
the codepen
You lost me along the way and I’m not sure which demos I’m looking at now for comparison.
I think you may be talking about the red hover effect on the hamburger in post #91 but I’m not sure if that is just a red herring
Either way just style it as you want - it’s only css after all.
I’ve given examples of this in action in my previous codepen #81 and it’s actually easier than duplicating code.
I think you’ve got enough examples to build what you want now so I suggest you concentrate on one thing at a time and commit to one design rather than chopping and changing.
thank you. i would like to ask about tha mentioned line in menu001.html. your example doesn’t have on collapse even i am giving min-height:105px.
thank you, frank
Can you show me a screenshot of the line as I’m obviously looking in the wrong direction
as i click on the last codepen hamburger icon, it appears a line under restaurant virtually, and i don’t understand why. thank you, frank
If you are talking about the little white line that runs full width at the top of the open small screen menu then that’s the border and box-shadow on the collapsed navbar.
You can remove it with this code:
.navbar-default .navbar-collapse{border-top-color:transparent;box-shadow:none;}
yes, that’s right. is it ok to leave there or should i remove it?by the way, is min-height in order? thank you, frank
I prefer it without the min-height and allow the background to fit the content (assuming we are talking about navbar-custom).
However it’s your design so do what works for you:)
thank you.
i would like to ask, if i give enogh margin-top, collapsing window won’t push down the rest of content. that was the main reason of min-height, keep content stable, not affected of collapsing window(kind of jumping).thank you, frank
Hi
unfortunately I need to come back with buttons again. grouping isn’t work, most likely I made mistake. I post my code. I would need to a modal I try to connect to te menu I am working still.thank you frank.
It’s called responsive design It’s supposed to adapt naturally.
Fixing heights is bad practice and usually only done from a designers point of view and not a users. What happens if the user zooms their text only? All the heights will be wrong. Just let content reorganise and wrap. If you need to control it more explicitly then go to the hamburger earlier.
You will have to explain what’s not working exactly as I don;t know what you are referring to ?
Back tomorrow now.
i try to use grouping to separate the two buttons. the code you gave me works well if i have one button. if i have two i have to separate them otherwise i confuse the browser. thank you, frank
Never mind the browser you are confusing me
You will need to explain to which demo you are referring and what you expect to happen.
I didn’t see any relevance in the demo you last posted 