nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I make the logo and site name link back to our Open Data main website? Currently, it does this on our main page, but the other open data sites link back to their homepage.

ChayaBalsiger

I have a main page that has all open data on it and I have several different group pages that has open data that is associated with that group (i.e. public safety or recreation). I want the logo and the site name at the header to link back to the open data main page when clicked. How do I do this?

Find more posts tagged with

Accepted answers

Anonymous User

Ah! What Maryland has done is pretty custom, but I've got some simple step that will get you started.

First, log into ArcGIS Open Data, find your site and go to the Design Layout tab.

In the top section of this page you will see the default Site Header wizard (pictured below).

Screen Shot 2015-07-14 at 8.14.06 AM.png

Next, click on the CODE tab. You will see two fields, one for the Header HTML and one for the CSS.

Screen Shot 2015-07-14 at 9.20.38 AM.png

Remove all of the HTML on lines 1 through 8. Leave lines 10 and 11 as those are there to help people with screen readers navigate your site. Note that when you click inside the HTML area you will get a message to let you know that once you add custom HTML, the wizard view will no longer be available. Not to worry.

Screen Shot 2015-07-14 at 8.14.33 AM.png

Next we are going to create a new row with two columns (splitting the header area into two areas). Using the Bootstrap classes, we'll just make both columns .col-xs-12.

In the first column you can place your logo and html for links. For demonstration purposes, I've just places a heading in the second column.

In the Header CSS field you can add any css rules you might need to adjust the header to the way you want it to look. In this same code I've made the navbar overall a little taller than it is by default. I've also added a background color and did a little adjustment on the spacing to get my elements to play nicely in the new space.

Screen Shot 2015-07-14 at 9.29.11 AM.png

This code change results in a navbar that now looks like the image below and my logo links to anywhere I want it to go.

Screen Shot 2015-07-14 at 9.14.35 AM.png

To get you started, you can copy/paste the HTML and CSS from this Gist.

Hopefully this answers your question.

Erich

All comments

Anonymous User

Hello Chaya,

Can you help me understand your question a little better? By default, the logo and site name throughout your Open Data site should link back to the home page. Is it not doing this? Or are you trying to get the link to go somewhere else?

Erich

ChayaBalsiger

Hi,

It would be easier to explain if I could show you what it does on my site, but it is currently private. I will use the City of Maryland's open data site as an example. If you go to data.imap.maryland.gov and click on Agriculture, it will take you to a page that displays data relating to the category "Agriculture". When you click on City of Maryland's logo or the title at the top of the page, it will take you to the main open data site (data.imap.maryland.gov). This is what I want my site to do.

Anonymous User

Ah! What Maryland has done is pretty custom, but I've got some simple step that will get you started.

First, log into ArcGIS Open Data, find your site and go to the Design Layout tab.

In the top section of this page you will see the default Site Header wizard (pictured below).

Screen Shot 2015-07-14 at 8.14.06 AM.png

Next, click on the CODE tab. You will see two fields, one for the Header HTML and one for the CSS.

Screen Shot 2015-07-14 at 9.20.38 AM.png

Screen Shot 2015-07-14 at 8.14.33 AM.png

Next we are going to create a new row with two columns (splitting the header area into two areas). Using the Bootstrap classes, we'll just make both columns .col-xs-12.

In the first column you can place your logo and html for links. For demonstration purposes, I've just places a heading in the second column.

Screen Shot 2015-07-14 at 9.29.11 AM.png

This code change results in a navbar that now looks like the image below and my logo links to anywhere I want it to go.

Screen Shot 2015-07-14 at 9.14.35 AM.png

To get you started, you can copy/paste the HTML and CSS from this Gist.

Hopefully this answers your question.

Erich

ChayaBalsiger

This helped. Thank you!

Anonymous User

You're welcome! Once you launch your site come back and post the link. I'll be interested in seeing how you customize it.

Erich

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.