Work on markup

logo.css

.logo{
	background: url("/static/logo.png") no-repeat 0 0;
	width: 181px;
	height: 37px
	display: inline-block;
	margin-top: 20px
	margin-left: 40px; 
}

logo.haml

.mp_main_layout_header_content
  .def_l_abs{style: " left: 85px; top: 29px; z-index: 2; "}
    .def_image
      %img{src: "/static/logo.png"}/
      %a.def_image_link{href: "/"}
....

.mp_main_layout_header_content
  %a.logo{href: "/"}

menu.haml

.mp_top_menu
  .item
    %a.link{href: "/solution-provider", target: "_blank"} BMC Partner Locator
    .arrow

menu.html

<div class="mp_top_menu">
	<div class="mp_top_menu_item">
		<a class="mp_top_menu_item_link" target="_blank" href="/solution-provider">BMC Partner Locator</a>
		<div class="mp_top_menu_item_arrow"></div>
	</div>
	
.....

<div class="mp_top_menu">
	<div class="item">
		<a class="link" target="_blank" href="/solution-provider">BMC Partner Locator</a>
		<div class="arrow"></div>
	</div>
	

style.scss

// Use Pseudo classed for common code snippets
%menu_text{
	font-family: 'Open Sans','Arial';
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}
// Define Colors
$white: #FFFFFF;
$menu_text_color: #424242;
$menu_gb: #E6E6E6;

.mp_top_menu{
	background-color: $white;
	border: 1px solid $menu_gb;
	border-radius: 3px;
	display: table;
	margin: 0 auto;
	position: relative;
	top: 90px;
	z-index: 1;
	.item{
		border-left: 1px solid $menu_gb;
    color: $menu_text_color;
    cursor: default;
    display: inline-block;
    @extend %menu_text;
    
    margin: 5px 0;
    padding: 5px 24px;
    position: relative;
	}
	.link{
		color: $menu_text_color;
    text-decoration: none;
	}
	.arrow{
		color: #424242;
    cursor: default;
    @extend %menu_text;
  }	
}