Latest Contributions by KlaraSchmitt

Just wanted to give you a heads up - your bug has been fixed and should go out in next Tuesday's release. ... View more

Hi Benjamin, If you could provide an example so we could see what you are seeing that would be great. I'm also on a Mac so if you want to post a link, I can try to view your problem directly, or you can include screenshots. ... View more

Hello, Unfortunately, changing your header from fixed to static is currently not offered. It was implemented as fixed at a level is above the Custom Header option, so you wouldn't be able to affect it from our code editors. The reason we use a fixed header is because in many parts of the app, especially portions that have long lists of content (such as search results), you wind up doing a lot of scrolling on mobile devices. It's a usability best practice to keep the header visible because it lets people get around quickly, rerun searches, or exit their current page without having to scroll all the way back up.  If you find your custom-header takes up too much space on mobile devices, you might be able to use media queries to change the height and style of it. ... View more

Hello Chandra, Unfortunately, having an active page marked in a custom Header/CSS implementation is not possible. This is because pages inherit the site's branding to maintain consistency. You may have noticed that you don't have the ability to customize header/footer/theme at the page level and so if you're setting an active class on the homepage for a link, it will stay that way on all other pages because you set it from the homepage. If you were building a static HTML website, you'd paste the header code section at the top of the page and change the active menu item manually, or you'd use Javascript to change it for you. However, Hub does not support static website creation and due to security vulnerabilities and also past issues where customers would import additional Javascript frameworks that would collide with our own code and break their sites, we no longer permit Javascript customizations. If you choose to use one of our two dynamic header options though, the active page will automatically highlight for you as you move around your pages. ... View more

You're in luck! It is something easy to fix. So the .navbar-right menu is positioned on the right by a float, when you switch it to mobile, you are still getting stuck with the float because it has a !important on it (not the best practice, and I'll make note because I think it's a holdover from an old bug) and because it's a float element, the other content is sitting on top. It looks like if you add: @media (max-width: 767px) {    .navbar-right {       float: none !important;     } } to your CSS, you can override the float and have both menus show up normally. Although, it's worth noting that your menu may not appear 100% visible because the menu currently scrolls. It has a max-height: 350px on it. If you extend that to 470px, you should have your links all visible and scrolling as necessary. I was tempted to take out the max-height all together and set a padding on the bottom of the container, but it seemed tied to the scroll functionality and I didn't want you to loose that for small device screens. .navbar-fixed-top .navbar-collapse {    max-height: 470px; } Lastly, as a small caveat, I didn't cross browser test this code. It should be fine. None of it involves properties that are unsupported within IE or Edge, but for your awareness, I only looked at it in Chrome. ... View more

Hi Nataliya, I'm going to start with your padding question first. It's not actually an issue of padding. You can use Chrome Dev Tools to inspect (right-click the element on the page, then click Inspect from the dropdown menu) the two navbars you have in your header. Highlighting a portion of the code will show you want element is being controlled on the web page. In the Styles section of the Dev Tools, you can then scroll the CSS rules being applied to this element and toggle the checkboxes on and off until you find what attribute is the culprit. In this case, the padding is not padding and it actually comes from a min-height that is set on this element from Bootstrap and is therefore part of our codebase. I think you were trying to fix it by using .first-tier {height: 0;}, but that wouldn't work because height and min-height don't negate one another. To fix the space between your headers, you would want to add this line of CSS to your code. .site-header .custom-header .navbar { min-height: auto; } ‍‍‍‍‍‍‍ As for your issue with a responsive state, your have a couple different factors at play. 1) You do have media queries, which is good, as those are what will help you control your custom header at different sizes. But they are used on classes that don't exist in your code at all. It looks like you're trying to hide navigation links at smaller sizes, but when I shrink your header down, I don't see any classes that do the hiding (eg. .header-container .navbar.navbar-default .navbar-collapse.collapse). If the classes aren't there in your HTML, then your CSS and media queries won't work and that's why your links are wrapping and overflowing the header instead of collapsing into a mobile menu. 2) Based on the classes you have in your CSS, I think you were trying to use https://getbootstrap.com/docs/3.4/components/#navbar to handle the responsive state for you. If that's the case, you need to base your HTML on that example. We use Bootstrap 3, but in order to have Bootstrap handle the responsive behavior for you, you need to format your HTML following their guidelines. You are currently missing the part that generates the burger menu and contains the data-target that ties it to the matching ID on your nav-collapse div. <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- This is what generates your burger menu icon on mobile --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a><!-- This is optional and can be removed. --> </div> <!-- This is what gets hidden behind the burger menu icon --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link C (Dropdown)<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Right-aligned Dropdown<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ So you have two options for a more responsive header, you can either format your HTML to follow the Bootstrap specification, which will handle responsiveness for you or you can tie media queries to the actual classes you have in your HTML. Although, if you do the latter, I recommend you add more unique classes to your btn-group divs, so that you can associate a media query to something less generic.  ... View more

Hi Sarah, By turning off that capability that Patrick mentioned, visitors will have the opportunity to open a result by clicking the title and viewing the full description on the item details page. However, they will still have to click the title. Unfortunately, we don't offer any functionality allows visitors to expand the search result description within the context of the search results page. We truncate descriptions like many other search engines and use an ellipsis to denote that you might not be seeing all available information within a search result item, which is a pattern similar to Google: We can take your request under consideration for the future. ... View more

Hi Aaron, Currently, it is not possible to configure collections. However, we do have an issue on our backlog for giving more control over that feature. The collections present in autosuggest are intended to help visitors more easily explore content available on a Hub. However, unlike the search results page, collections are not supposed to show in the autosuggest if you have no content of that type in your catalog. If you only had data in your catalog, then only data should show as recommended in autosuggest. I was able to confirm that is not what is happening right now. I will open a bug about it. ... View more

Hi Sarah, Sorry for the slow response. In our search results pages, we use the ellipsis to truncate the text coming from the item description because descriptions can often be a couple paragraphs, which is too long to easily scan for most people. We follow a similar design pattern as other search engines in using the ellipsis from a grammar standpoint and not as a "read more" button. That being said, I think this may have bug that got fixed (or at least I'm having a hard time reproducing it on my site.) I know it's a capability that you can turn on to have apps and maps operate open full-screen under your header and I think the bug was that it got turned on by default. Could you let me know if you're still experiencing this problem? ... View more

Hello Kirsten, We currently do not support modal dialogs that trigger from an onLoad event and you are correct that we block javascript from our text cards. We do this to mitigate the security risk of having malicious code injected and also because people used to load in duplicative instances of jQuery or Bootstrap.js that would collide with our files and cause things like dropdown menus not to work correctly. We do have a feature for this on our backlog, but I cannot give you an answer for when it'll be included in the product. I, will, however add your request to the issue. In the meantime, is it possible to present that information in an info alert at the top of the page? If you were to use a custom header, you could even position it right near the top. I see a number of alerts around cookies these days that do not require explicit consent and are worded such that if I continue to use the page, I am agreeing to have cookies track my movement. ... View more

Hi Arne, Are there any specific problems you are trying to address? I might be able to find others who'd have resources if you're looking for specific areas. Unfortunately, my background is more of general UX/UI with a focus in web accessibility and less so in cartographic areas.  ... View more

If you have a custom header, then yes, you can do the same thing with your own links. You just need to use the full anchor URL in the href for your links. If you need additional information on how to construct a navbar in HTML, I recommend the Bootstrap docs: https://getbootstrap.com/docs/3.4/components/#navbar But the process for adding inline anchor links is still the same. If you are trying to anchor link to a different type of card (ex. a chart chart), you will have to add a text card above the card you are targeting and then add the anchor ID. You then append that anchor ID by a hash at the end of your site URL and you now have the full URL for your anchor. Our documentation site is going to go through an overall in the next few months to improve ease-of-use, but I will pass that along to the person who manages it. ... View more

> Ideally, I don’t want to change the navbar on the “News” page, I want to be able to navigate back to the home page sections from the “News” page.  From what you are saying and what I’ve experienced, this doesn’t seem possible as you either have to have the navbar coded to a single Hub page content sections or have the navbar coded to go to other Hub site pages and you can’t mix and match. You should be able to do what you're saying. If you have a site that has 3 links in the header:"About Us" "Data" and "News." "About Us" and "Data" could be anchor links to sections in your main site whereas News could take you to a second page. However, as it currently stands you must use absolute path for anchors links (example: https://earthday-parkville.hub.arcgis.com#get-involved) in the external link field when you are adding them to the header. There is also a bug that if you have a gallery card on your main site and it appears above the anchor link for "About Us" that someone clicks on the News site, the page might jump a little as the gallery card loads in because the anchor link happens faster than the page loading. To correctly set up your anchor links, you'll need to use an id on the in-page anchor and the absolute path in the header. So for a heading on your main site, you'd want to use a text card to format your anchor link like this: Then in your site header, add an external link to your menu and paste in the full URL to your anchor link. It should look like this: Then you'll have an anchor links in your header that can take you to in-page content on your homepage from both the homepage and the News page. ... View more