CODEWITHSUNDEEP
htmlcssmaterialize
avocado
avocado

Reputation: 2735

materialize css extended navbar overlaps with following content

According to Materialize doc, we could create an extended navbar, but I found that the extended nav could overlap with the following content (e.g. div).

Please see code example in Jsfiddle.

enter image description here

I thought maybe setting a padding-top on body could mitigate this issue, but I couldn't figure out how to get how much padding to use to resolve the overlapping issue. Or is there any other better solutions?

Upvotes: 1

Views: 293

Answers (1)

Bahman Parsa Manesh
Bahman Parsa Manesh

Reputation: 2370

As mentioned in Materialize - "Fixed Nav" part :

"navbar-fixed will offset your other content while making your nav fixed."

So to resolve the problem you can remove div with navbar-fixed class. Then to fix the navbar you can use position: fixed in css. Also use position: relative and top for content's division to make a distance from top of page.

I updated your fiddle to resolve the issue.

Upvotes: 1

Related Questions