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.
Accepted Solutions
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).
Next, click on the CODE tab. You will see two fields, one for the Header HTML and one for the CSS.
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.
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.
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.
To get you started, you can copy/paste the HTML and CSS from this Gist.
Hopefully this answers your question.
Erich
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).
Next, click on the CODE tab. You will see two fields, one for the Header HTML and one for the CSS.
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.
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.
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.
To get you started, you can copy/paste the HTML and CSS from this Gist.
Hopefully this answers your question.
Erich