Display content to the right of the nav sidebar

Patrick92
Kilo Explorer

‎01-27-2020 05:49 PM 

Hi!

I'm customizing a portal where the navbar should be located on the left of the screen, vertically.

It turns out that the rest of the content is getting below the navbar, and not to the side.

I created it from Header and, if it is fixed, nothing displays on the page. Instead, the content is shown below.

How do I display the content to the right of the navbar? Below is a printscreen and the code used.

find_real_file.png

<nav class="sidebar-navigation">
	<ul>
		<li class="home">
			<img class="logo" ng-src="{{::portal.icon}}"/>
			<span class="tooltip">Title</span>
		</li>
		<li>
			<i class="fa fa-hdd-o"></i>
			<span class="tooltip">Label</span>
		</li>
      	        <li>
			<i class="fa fa-sliders"></i>
			<span class="tooltip">Label</span>
		</li>
	</ul>
</nav>
//Basics
* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Lato', sans-serif;
	line-height: 1;
}

body {
	background-color: #F5F6F8;
	overflow: hidden;
}

//Color Variables
$sidebar-background-color: #404766;
$active-sidebar-link-color: #7a87bc;
$hover-sidebar-link-color: $active-sidebar-link-color;
$active-link-color: #98D7EC;
$tooltip-background-color: $sidebar-background-color;

.sidebar-navigation {
	display: inline-block;
	min-height: 100vh;
	width: 80px;
	background-color: $sidebar-background-color;
	float: left;
	
	ul {
		text-align: center;
		color: white;
		
		li {
			padding: 28px 0;
			cursor: pointer;
			transition: all ease-out 120ms;
			
          	img {
              	height:35px;
    			width:35px;
            }
          
			i {
				display: block;
				font-size: 24px;

				transition: all ease 450ms;
			}
			
			.tooltip {
				display: inline-block;
				position: absolute;
				background-color: $tooltip-background-color;
				padding: 8px 15px;
				border-radius: 3px;
				margin-top: -26px;
				left: 90px;
				opacity: 0;
				visibility: hidden;
				font-size: 13px;
				letter-spacing: .5px;
				
				&:before {
					content: '';
					display: block;
					position: absolute;
					left: -4px;
					top: 10px;
					transform: rotate(45deg);
					width: 10px;
					height: 10px;
					background-color: inherit;
				}
			}
			
			&:hover {
				background-color: $hover-sidebar-link-color;
				
				.tooltip {
					visibility: visible;
					opacity: 1;
				}
			}
			
			&.active {
				background-color: $active-sidebar-link-color;
				
				i {
					color: $active-link-color;
				}
			}
          
            &.home {
                  background-color: $active-sidebar-link-color;

                  i {
                      color: $active-link-color;
                  }
              }
		}
	}
}
 
Preview file
4 KB
0 Helpfuls
  • 1,649 Views
1 REPLY 1

Brandon Barret1
Mega Sage

‎01-30-2020 08:57 AM

 In order to create a sidebar nav, there are a few things that must be taken into consideration and a few possible strategies to try. You can read my answer here for a bit of insight: 

https://community.servicenow.com/community?id=community_question&sys_id=97aea5201bd844d0ada243f6fe4b...

This is also a pretty great resource:

https://sc.service-now.com/snds?state=widget-detail&sys_id=c2636430db7bef40b4d974921f9619a2

 So it is somewhat unclear to me, but is your sidebar nav a widget? It should be a widget and you should plan your page layout accordingly. Lay it out for example in a 3 | 9 Bootstrap layout. The sidebar nav would take up the 3. The 9 is for all other widgets and content to live in to the right of that. So in your example, the sidebar would live in the 3 column, your "hello" would live in the remanning 9 (each page can initially be thought of as 12 columns across, which can in turn be broken up into 12 column units themselves). 

I read up on fluid v. fixed positioning, rows and containers and bootstrap layouts when I created mine. I also used the widget from the innovation library as a blueprint. Hope that helps!

If my answer helps you, please mark it as helpful or correct and good luck! 

0 Helpfuls