# Need help adding external links at top of page

**URL:** https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513
**Category:** Development
**Created:** [25 september 2019 om 19:21 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513 "2019-09-25T19:21:36Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![zavala](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavala/32/57513_2.png) [@zavala](https://meta.discourse.org/u/zavala)
#### Post date: [25 september 2019 om 19:21 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513/1 "2019-09-25T19:21:36Z")

</div>

I’m not sure if this is a theme issue or not, but our Discoures pages are part of a bigger website. The website look and feel is changing and I am trying to figure out how to make our discourse pages match. I have been successful in using a Theme, except for the external links at the top of the page.

They should be horizontal, and instead, they are showing up vertically.  
I took this code from the old theme and put it in the Header tab of the CSS/HTML editor:

```plaintext
<body class"staff navigation-categories categories-list" data-gr-c-s-loaded="true">
::before
<div id="top-navbar">
    <div id="top-navbar-links">
        <div id="xg_masthead">
            <h1 id="xg_sitename" class="xj_site_name"><a id="application_name_header_link" href="http://community.uaccess.arizona.edu/"><img src="/uploads/default/original/1X/30cb387c966257871ec97c979d4759e784945fc7.png" alt="The UAccess Community Forums"></a></h1>
        </div>
    <ul id="top-external-nav">
        <li class="top-ext--main">
            <a class="top-ext--link top-discourse-link-main" href="http://community.uaccess.arizona.edu/">Home</a>
</li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">Forums</a>
            <ul class="top-ext--sub" id="top-discourse-sub-forums">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/announcements">Announcements</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analytics</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">Budget</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">Employee</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Financials</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Learning</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Research</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Student</a>
</li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-events">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events" target="blank">Events</a>
            <ul class="top-ext--sub" id="top-discourse-sub-events">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-speaker-series">Speakers</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events/2016-uaccess-symposium">Symposium</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/calendar">Calendar</a>
</li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-resources">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/resources">Resources</a>
            <ul class="top-ext--sub" id="top-discourse-sub-resources">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/business-office-resources">Business Office</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analytics</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">Budget</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">Employee</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Financials</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Learning</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Student</a>
</li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">FAQs</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">Contact Us</a>
        </li>
    </ul>
  </div>
</div>

```

---

<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: [25 september 2019 om 19:30 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513/2 "2019-09-25T19:30:07Z")

</div>

> [@zavala](#):
>
> They should be horizontal, and instead, they are showing up vertically.

The code you have in your post only contains HTML, so it’s expected that it would show as an unstyled vertical list. In order to have a horizontal list, you need to include the CSS for that element.

Also, by the looks of it, It’s probably supposed to be a menu with submenu items. So, You’d also need to add the JavaScript that handles that to your theme / component.

---

<div class="post-metadata">

### Author: ![zavala](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavala/32/57513_2.png) [@zavala](https://meta.discourse.org/u/zavala)
#### Post date: [25 september 2019 om 19:33 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513/3 "2019-09-25T19:33:26Z")

</div>

Hi Joe, thanks for the response.

So I should be able to look up the css code to make the menu horizontal and then add that code to the top of this code?  
(sorry, I’m a newbie)  
And yes, three of the links have submenus.

---

<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: [25 september 2019 om 19:42 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513/4 "2019-09-25T19:42:01Z")

</div>

No worries Catherine 👍

> [@zavala](#):
>
> So I should be able to look up the css code to make the menu vertical and then add that code to the top of this code?

That depends on where you’re getting the HTML for the menu.

> [@zavala](#):
>
> I took this code from the old theme

Is that a Discourse theme?

If so, you should be able to get the CSS from it if you go to the CSS tab of the theme. You’d then only need to copy the CSS to the new theme. If not, then the process is a bit different, and I can try to help if you give me more details.

If you don’t want to worry about maintaining the code for the menu, we have an easy to configure theme component that’s similar to what you’re trying to achieve here

> [@Header Submenus](https://meta.discourse.org/t/header-submenus/94584):
>
> discourse2Summary Header Submenus will allow you to build a header menu - with submenus - using plain text!eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/header-submenus)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-header-submenus](https://github.com/discourse/discourse-header-submenus)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile Settings Name Description Menu items Add menu items. O…

---

<div class="post-metadata">

### Author: ![zavala](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavala/32/57513_2.png) [@zavala](https://meta.discourse.org/u/zavala)
#### Post date: [26 september 2019 om 00:06 UTC](https://meta.discourse.org/t/need-help-adding-external-links-at-top-of-page/129513/5 "2019-09-26T00:06:20Z")

</div>

Thanks for the assistance Joe.  
The CSS field for the old “Theme”? is empty.  
I spoke with someone who knew some of the site history and they stated it’s all custom. And the look and feel are accomplished by pointing to external CSS files.  
Before I ask you to spend anymore time with me, I’m going to try a few more resources on this end to see if I can push the needle a bit.

I have to put the project away for a few days anyway while I tend to other more tasks.

I’ll let you know how it goes.

Thanks again,  
Catherine
