Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Christopher MilnerChristopher Milner 

Assistance with Lightning Component Header/Navigation Bar being Mobile Responsive

We have a custom lightning component (titled NavBar) which was built to function as a header/navigation bar for our Koa community. Awhile back, an update broke the mobile responsiveness of this. i.e. when a desktop browser window was shrunk or when viewed on a smaller screen (such as a phone or tablet), the menu would compress and options would be under a hamburger icon. Now, the the menu items no longer compress and the bar breaks visibility on anything less than a full browser page. I did not write this and am barely into learning CSS, Bootstrap, lightning, etc. so was hoping to maybe get some assistance. The code in its basest form is as follows: 
<aura:component implements="forceCommunity:availableForAllPageTypes" >
	<div class="hcss-header">
		<div class="hcss-header-color"> 
			<a class="hcss-header-logo" href="/"><img src="https://hcss.force.com/customer/s/HCSS-Logo2.png?v=1" style="height:55px; padding-top:7px;"/></a>
			<div class="hcss-header-links">
				<a class="item" href="/">Home</a>
				<a class="item" href="/s/contactsupport" target="_blank">Contact Support</a>
				<a class="item" href="https://support.hcss.com/" target="_blank">Download Portal</a>
				<a class="item" href="http://community.hcss.com" target="_blank">HCSS Community</a>
				<a class="item" href="/s/webinars" target="_blank">Webinars</a>
				<a class="item" href="http://chat.hcss.com" target="_blank">Live Chat</a>
				<a class="item hcss-active" href="http://bomgar.hcss.com" target="_blank">Start A Remote Session</a>
			</div>
		</div>
	</div>
</aura:component>
Vishu Sri 6Vishu Sri 6
Is the issue resolved for you? As I am also facing issue while implementing hamburger menu in lightning.