Jump to content

Double-sided Horizontal Collapsible Navbar


GPT

Recommended Posts

Hi,

 

How can a "double-sided horizontal collapsible navbar" be created with either w3.css or bootstrap?

 

Please see photo attached.

 

When "Menu" is clicked then 2nd row (default) is displayed. When "Login" is clicked then 1st row is displayed.

 

Please consider that a third "column" exists which floats (left or right) accordingly!

 

Thanks in advance.

 

 

 

post-203228-0-55861700-1483988936_thumb.png

Link to comment
Share on other sites

It can be done, but not with basic W3.CSS or Bootstrap, you'll have to do some Javascript programming.

 

When "menu" is clicked, hide the top bar and show the bottom bar. When "login" is clicked, hide the bottom bar and show the top bar.

Link to comment
Share on other sites

Ok. This is one way. Two different "navbars" of which one is hidden and one is displayed in one (the same) row. Is this what you mean?

 

Can this be done by using only one "navbar" with "sliding" feature?

Link to comment
Share on other sites

Yes. Your specifications weren't clear. Your post made it sound like you have two rows and you want to switch between them.

 

You can have one nav bar and make its content change when buttons are clicked, but it's going to need some complicated Javascript to work properly. Is it horizontal sliding or vertical sliding that you want?

Link to comment
Share on other sites

Sorry about my misleading spec.

 

In "large" screens horizontal "sliding", in "small" screens vertical one.

 

In "small" screens we shall have in line the following buttons "Menu", "Message", "Login", "Register", "Language".

 

In "smaller" screen "Message" "leaves" the row, only "Menu", "Login", "Register", "Language" are displayed.

 

Finally, only four icons remain in the bar.

 

Am I asking too much???

 

PS: By "sliding" feature, I mean a kind of "horizontal accordion" or "Drop-aside" (similar to "Dropdown").

Edited by GPT
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...