Jump to content

Self-adjusted height in a navbar and wrap feature

Recommended Posts



I have created (or better, my intention was to create) a simple navbar by using W3.CSS framework as follows (see photo and code):


1/12 2/12 2/12 2/12 2/12 1/12 1/12 1/12

| MENU | Message || Username | Password | reCAPTCHA | Login || Register | Language |


- I would like the height of the navbar to be self-adjusted; when I remove the "height: 55.5px" from, or set "height: inherit/auto" into, <div id="login"> the navbar's height takes the value of 2px and the buttons remain on the air!

* What am I doing wrong?

* How can I make the highest height of existing elements to inherit its value to the navbar's height?

* Does "g-recaptcha" element play any role?


I would like the navbar to behave responsively as follows:


2/12 2/12 4/12 4/12 or 3/12 3/12 3/12 3/12

| MENU | Message || Username | Password | | Username | Password | reCAPTCHA | Login |

| Register | Language || reCAPTCHA | Login | | Register | Language |

| MENU |

and finally:


6/12 6/12

| Login | Register |

| Menu | Language |


How can I make the navbar to get wrapped and elements appear in a second row, by using only existing W3.CSS elements?


Please, just give hints and advices.


Thanks in advance.



Link to post
Share on other sites

DON'T use position absolute, for layout purposes, elements that use this are taken out of the flow of other elements, other elements will move to occupy the space it leaves, and parent elements will collapse because it has no area to maintain its height. The main purpose you would use this is for overlapping purposes.

Link to post
Share on other sites

Ok. I have changed, through inline style, the w3-display-middle class "absolute" position (default) into "relative" position.


Setting height manually is not required any more. Thanks!


What about the "wrap" feature? When I use "flex-wrap: wrap;" the height is not adjusted again (Register and Language blocks overlap each other)? Any hint, suggestion?


Tia: T(hanks)i(n)a(advance)

Link to post
Share on other sites

The only other property that would cause a similar issue as position: absolute; as regards to parent element collapsing, is the use of floated elements, the normal fix is to apply overflow: hidden; to parent, or create content:"", to place below all floated elements, and give it clear: both.

Link to post
Share on other sites

Ok. But which W3.CSS elements are floated i.e. which W3.CSS elements have inherited the "float" class/attribute, if they have it?


(This is the reason that I have asked (by separate post) if there is a hierarchy diagram. I suspect that the W3.CSS creator(s), b4 they start coding, he/she/they made a design plan of how this "construction" will "develop". Anyway, I am not a member of IT industry and surely I do not know how to "understand" IT folks.)



Edited by GPT
Link to post
Share on other sites

Every browser has web development option F12, look for inspect select elements in question, view css for that element. It should show all html in current document, you can then transverse down through these elements to identity what styles are applied to that element by the class or id.


One more thing, don't adjust the w3css styling directly, add you own class and use styling to override the w3css. What you adjust then does not affect the original w3css where you may find you require that original instead.

Link to post
Share on other sites

My guess is that, like bootstrap, the grid system is using floated elements. There should be a grid wrapper class of some sort to prevent this problem.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...