# Crie um cabeçalho de navegação global responsivo (Linkando entre Discourse e WP)

**URL:** <https://meta.discourse.org/t/create-a-responsive-global-navigation-header-linking-between-discourse-and-wp/98650>\
**Category:** Product Support\
**Created:** [3 Outubro , 2018 16:43 UTC](https://meta.discourse.org/t/create-a-responsive-global-navigation-header-linking-between-discourse-and-wp/98650 "2018-10-03T16:43:31Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [8 Outubro , 2018 08:20 UTC](https://meta.discourse.org/t/create-a-responsive-global-navigation-header-linking-between-discourse-and-wp/98650/5 "2018-10-08T08:20:08Z")

</div>

You were pretty close, I suggest using [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) since it’s very good at sizing elements automatically.

Something like this:

```plaintext
// Discourse header
.d-header {
  top: 3em; // should match link height
  position: fixed;
}

#main-outlet {
  padding-top: 8.8572em; // 5.8572 default padding + 3em link height
}

.navbar,
.navbar a {
  display: flex;
  align-items: center;
  width: 100%;
}

// styles for custom header
.navbar {
  position: fixed;
  background-image: linear-gradient(#66ccb4, #2d8671);
  z-index: 1001;
  box-shadow: 0 1px 4px 0px white;
  justify-content: space-evenly;
}

// styles for links
.navbar a {
  color: white;
  font-size: 1.1em;
  height: 3em; // set desired link height
  justify-content: center;
  border-right: 1px solid #c6ece3;
}

// remove border from last link
.navbar a:last-of-type {
  border-right: none;
}

// styles for links on mouse-over
.navbar a:hover {
  background-image: linear-gradient(#3aae93, #206051);
}

// add responsiveness 
@media screen and (max-width: 800px) {
  .navbar span {
    display: none;
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/create-a-responsive-global-navigation-header-linking-between-discourse-and-wp/98650)._