How can I move menu items to the top bar?

I would like to move the About Us & Contact Us menu items to the top bar next to the Sign In link, to create more space on the menu bar. How do I do this?

 

Hi merryandrew!

To move the About Us & Contact Us menu items to the top bar,please follow the screenshot given below.

PHP:

<ul class="custom-menu-top">
<li><a href="<--About US page url-->">About Us</a></li>
<li><a href="<--Contact US page url-->">Contact Us</a></li>
</ul>

Now please paste the code given below in Custom CSS section
(Geocraft Settings -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.top_strip .menu {
width: 50%;
}
ul.custom-menu-top li {
display: inline;
padding-right: 5px;
}
ul.custom-menu-top {
list-style: none;
float: left;
}
ul.custom-menu-top li a {
color: white;
}

Thanks,
Praveen

 

Thanks for this, it works well, but the top menu bar is too deep (thick green bar) - can I make it thinner?

URL is www.pubs.com

 

Hi,

Use the below CSS code to make the menu bar color thinner:
You can put your own color code

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.top_strip {
  background: #67A636;
}

Regards,
Sameer

 

Hi Sameer, sorry, I should have said narrower - I meant the size, not the colour.

 

Hi merryandrew!

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.top_strip {
  height: 25px;
}
ul.custom-menu-top {
  margin-bottom: 0;
}

Thanks,
Praveen

 

Good stuff, thanks Praveen.