Latest Contributions by KlaraSchmitt

Hi Colin, As of now, there are not any plans on our side for adding WYSIWYG (What You See Is What You Get) controls to custom headers. We make custom headers an available option, but we do prefer you use our suggested layouts if you want us to manage mobile and active states for you. If you, the author, of a custom header can achieve a CSS only solution for active pages - then it's entirely possible. You might look into using a[href] as an attribute selector in your CSS. ... View more

Hi Eric, Not quite the text card. You can do custom embedded styles within the text card if you want to style other elements of the homepage or stand alone pages, but if you want the mega menu in your Header, you'll want to open Header from the Customize Pane in the Site Editor and choose the Custom HTML/CSS radio from the Appearance accordion. Once you've selected that, you can put your custom header Bootstrap in the HTML block and put the CSS you're using to control the mega menu in the CSS block. The HTML and CSS blocks for the Header will remain scoped to the Header, so you it'll only affect that component. ... View more

Hi Nicholas, That is a very interesting idea and I will certainly make note of it. We are actively considering other methods for our customers to use in order to theme their sites. We're trying to achieve the right balance of customization, while also avoiding the mayhem caused by earlier versions of our software which allowed global stylesheets. (When we had global stylesheets, releases were often very stressful since customers' sites often broke because new features would collide with customized CSS in ways that we couldn't even being to guess ahead of time.)  We are also looking at color pickers that tie into a set of specific sub-classes (so you can reuse them for background, fill, text color, and border color.) Given that we currently allow you make custom classes through embedded style tags in a Text Card as you request, may I ask your goal? Is it that those classes aren't visible enough and you fear someone may inadvertently delete the card? Or that you want others to reuse them and they aren't visible enough in the Text Card? ... View more

The number of community accounts (which includes accounts created through social media) that are associated with your ArcGIS Hub is the count that came with your premium package. Anyone with an account can follow an initiative (staff or community); it is an action that can be done by named users, it is not a role. So if you have 100 community accounts, then 100 is the maximum number of community members who can follow an initiative. ... View more

Hello Sebastian, In order to follow an initiative, one would need a Hub identity as the follower is essentially subscribing for updates. We do not presently support anonymous followers. ... View more

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