CODEWITHSUNDEEP
vue.jsnavbarsidebarsemantic-ui
janat08
janat08

Reputation: 1777

Fixed navBar and sidebar overlap Semantic UI

I'm looking to maintain fixed navbar irregardless of sidebar with it appearing under the navbar as in here with attached top/bottom: http://codepen.io/redshift7/pen/VaKmjq

<div class="ui bottom attached segment">
  <div class="ui inverted labeled icon left inline vertical demo sidebar menu">

Attached segment won't work with fixed navbar where it will stretch through the page. I'd rather see the answer in vue.js.

Upvotes: 0

Views: 1679

Answers (1)

Saurabh
Saurabh

Reputation: 73609

You need to make following CSS changes for this to work:

.menu {
    position: fixed;
    top: 0px;
    z-index: 10001;
    width: 100%;
}
.pusher {
    margin-top: 36px;
}
.pushable {
    margin-top: 0px !important;
}

Working codepen: here

Upvotes: 1

Related Questions