Best practice for modifying navbar (increasing height and adding links)


#1

Hello,

I’m trying to customise my navbar to match my external site. I’ve looked through the forum and am yet to find a clear solution for my requirements.

Firstly, I would like to increase the height of the navbar to 89px. The suggested code I have found is:

.d-header {
height: 89px;
}

Whilst this does increase the height, it also hides content below and the logo/links etc. are no longer centred within the navbar.

Secondly, I want to match the navbar links with my external website and position them on the right hand side of the navbar. One method suggested is to use the following code to add nav links:

<ul class="nav nav-pills">
  <li><a href="URL">Link Text</a></li>
</ul>

However, this appears above the navbar on the left and perhaps isn’t the best approach to get the final result.

The other suggestion is to use:

<div id="top-navbar" class="container">
<span id="top-navbar-links" style="height:20px;">
  <a href="URL" class="nav-menu" id="home"><span id="SAME-AS-LINK-TEXT">Link Text</span></a>
</div>

So for the second navbar links, my questions are:

  • Which is the best approach to adding the links in?

  • What is the best use of CSS to position the links on the right hand side of the nav bar and keep it working responsively?

The site URL is http://community.blueggnutrition.com/ although, being a private forum with SSO set up, I’m not sure whether this is of use.

Many thanks!