title: How to horizontally align a list of contacts?
body: <p>I'm using a source code that shows a vertically align contacts by default but I would like to change them to a horizontal align behavior.</p>
  
  <p>I have tried the CSS <code>display:inline-block;</code> option but nothing made it change.</p>
  
  <p>So thinking further it might be an option on PHP but I don't have how to make the right changes to my PHP source code function.</p>
  
  <p><strong>PHP</strong></p>
  
  <p>The next source of code is just the function code that I believe I must change to have this behavior.</p>
  
  <pre><code>// Return an HTML string of the design of people list for each user
  function wpapl_people_list_single_user_html( $userID ) {
      $user = wpapl_get_academic_user_info( $userID );
      $siteurl = get_option('siteurl');
      $photo = wpapl_get_user_photo_uri( $userID );
  
  
  
      $html = '
          &lt;div class="wpapl-person"&gt;
              &lt;div class="wpapl-image"&gt;&lt;img src="' . $photo-&gt;uri . '" width="' . $photo-&gt;width . '" height="' . $photo-&gt;height . '" /&gt;&lt;/div&gt;
              &lt;div class="wpapl-mininum-information"&gt;
                &lt;h4&gt;&lt;span class="wpapl-person-name"&gt;' . $user-&gt;full_name . '&lt;/span&gt;&lt;/h4&gt;
                &lt;p&gt;&lt;span class="wpapl-people-individual-tag"&gt;Job:&lt;/span&gt; ' . $user-&gt;current_job . '&lt;br /&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Website:&lt;/span&gt; ' . makeClickableLinks( $user-&gt;url ) . '&lt;br /&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Email:&lt;/span&gt; ' . makeClickableLinks( $user-&gt;academic_email ) . '&lt;/p&gt;
                  &lt;a href="' . wpapl_get_user_profile_uri( $user-&gt;userID ) . '"&gt;Details...&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
      ';
  
      return $html;
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <p>The next source of code is the entire source of code from the style sheet used to this example.</p>
  
  <pre><code>.wpa label {
      float: left;    
      width: 17em;    
      margin-right: 1em;  
  }
  
  .wpapl-person {
      font-size: 1em; 
  }
  
  .wpapl-person .wpapl-image {
      float: left;
      padding-right: 5px;
  }
  
  #wpapl-category-list-navmenu ul {
      list-style-type:none; 
      padding:5px 0 5px 0;
      border-top:1px solid #E0E0E0;
      border-bottom:1px solid #E0E0E0;
      margin:10px 0;
   }
  
  #wpapl-category-list-navmenu li {
      display: inline;
      margin:0 10px; 
      text-transform:capitalize;
  }
  
  .wpapl-people-detail-tag {
      font-weight: bold;
  }
  
  .wpapl-people-individual-tag {
      font-weight: bold;  
  }
  
  .wpapl-project-minititle, .wpapl-publication-minititle {
      letter-spacing: 1ex;
      font-size: 1em;
      position: relative;
      top: 1.5em;
      font-variant: small-caps;
  }
  
  #wpapl-publications-list-top h3, #wpapl-people-list-top h3  {
          font-variant: small-caps;
  }
  
  .wpapl-publication-detail h4 {
      text-transform: capitalize;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <p>Outputted HTML code.</p>
  
  <pre><code>&lt;html lang="en-US"&gt;&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
  &lt;link rel="profile" href="http://gmpg.org/xfn/11"&gt;
  &lt;link rel="pingback" href="http://localhost:8888/wordpresstest/xmlrpc.php"&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/html5.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;title&gt;People | INESC-ID | IIS | VIMMI&lt;/title&gt;
  &lt;link rel="alternate" type="application/rss+xml" title="INESC-ID | IIS | VIMMI » Feed" href="http://localhost:8888/wordpresstest/feed/"&gt;
  &lt;link rel="alternate" type="application/rss+xml" title="INESC-ID | IIS | VIMMI » Comments Feed" href="http://localhost:8888/wordpresstest/comments/feed/"&gt;
          &lt;script type="text/javascript"&gt;
              window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/localhost:8888\/wordpresstest\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
              !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&amp;&amp;c.getContext("2d");return d&amp;&amp;d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length&gt;3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&amp;&amp;c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&amp;&amp;c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&amp;&amp;f.twemoji&amp;&amp;(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
          &lt;/script&gt;&lt;script src="http://localhost:8888/wordpresstest/wp-includes/js/wp-emoji-release.min.js?ver=4.2.4" type="text/javascript"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
  img.wp-smiley,
  img.emoji {
      display: inline !important;
      border: none !important;
      box-shadow: none !important;
      height: 1em !important;
      width: 1em !important;
      margin: 0 .07em !important;
      vertical-align: -0.1em !important;
      background: none !important;
      padding: 0 !important;
  }
  &lt;/style&gt;
  &lt;link rel="stylesheet" id="wpapl-style-css" href="http://localhost:8888/wordpresstest/wp-content/plugins/wp-academic-people/style.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="open-sans-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&amp;amp;subset=latin%2Clatin-ext&amp;amp;ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="dashicons-css" href="http://localhost:8888/wordpresstest/wp-includes/css/dashicons.min.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="admin-bar-css" href="http://localhost:8888/wordpresstest/wp-includes/css/admin-bar.min.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="wp-cards-css" href="http://localhost:8888/wordpresstest/wp-content/plugins/wp-cards/includes/css/components.css?ver=1438026764" type="text/css" media="screen"&gt;
  &lt;link rel="stylesheet" id="bootstrap-styles-css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-google-fonts-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C300italic%2C300%2C600%2C600italic%7CLato%3A400%2C100%2C300%2C700&amp;amp;ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-font-awesome-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/font-awesome.min.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-fancybox-css-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/nivo-lightbox.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-bx-slider-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/jquery.bxslider.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-woo-commerce-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/woocommerce.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-font-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/fonts.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-style-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/style.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;link rel="stylesheet" id="accesspresslite-responsive-css" href="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/css/responsive.css?ver=4.2.4" type="text/css" media="all"&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/jquery/jquery.js?ver=1.11.2"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"&gt;&lt;/script&gt;
  &lt;link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/wordpresstest/xmlrpc.php?rsd"&gt;
  &lt;link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wordpresstest/wp-includes/wlwmanifest.xml"&gt; 
  &lt;meta name="generator" content="WordPress 4.2.4"&gt;
  &lt;link rel="canonical" href="http://localhost:8888/wordpresstest/people/"&gt;
  &lt;link rel="shortlink" href="http://localhost:8888/wordpresstest/?p=54"&gt;
  &lt;style type="text/css"&gt;&amp;lt;iframe src=”https://www.google.pt/maps/place/R.+Alves+Redol+9,+1049-001+Lisboa/@38.7363562,-9.1407662,17z/data=!3m1!4b1!4m2!3m1!1s0xd1933a1834b16ef:0x6d0bf6f533f05514”&amp;gt;&amp;lt;iframe&amp;gt;&lt;/style&gt;    &lt;style type="text/css"&gt;.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}&lt;/style&gt;
  &lt;style type="text/css" media="print"&gt;#wpadminbar { display:none; }&lt;/style&gt;
  &lt;style type="text/css" media="screen"&gt;
      html { margin-top: 32px !important; }
      * html body { margin-top: 32px !important; }
      @media screen and ( max-width: 782px ) {
          html { margin-top: 46px !important; }
          * html body { margin-top: 46px !important; }
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body class="page page-id-54 page-template-default logged-in admin-bar no-sidebar customize-support" data-pinterest-extension-installed="cr1.38.3"&gt;
  &lt;div id="page" class="site"&gt;
  
      &lt;header id="masthead" class="site-header"&gt;
      &lt;div id="top-header"&gt;
          &lt;div class="ak-container"&gt;
              &lt;div class="site-branding"&gt;
  
                  &lt;a href="http://localhost:8888/wordpresstest/"&gt;             
                                      &lt;img src="http://localhost:8888/wordpresstest/wp-content/uploads/2015/08/cropped-cropped-cropped-II07.png" alt="INESC-ID | IIS | VIMMI"&gt;
  
                  &lt;/a&gt;
  
              &lt;/div&gt;&lt;!-- .site-branding --&gt;
  
  
              &lt;div class="right-header clearfix"&gt;
                                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                      &lt;div class="socials"&gt;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
          &lt;/div&gt;
                  &lt;div class="ak-search"&gt;
                          &lt;form method="get" class="searchform" action="http://localhost:8888/wordpresstest/" role="search"&gt;
          &lt;input type="text" name="s" value="" class="s" placeholder="Search..."&gt;
          &lt;button type="submit" name="submit" class="searchsubmit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/form&gt;
                  &lt;/div&gt;
                              &lt;/div&gt;&lt;!-- .right-header --&gt;
          &lt;/div&gt;&lt;!-- .ak-container --&gt;
    &lt;/div&gt;&lt;!-- #top-header --&gt;
  
  
          &lt;nav id="site-navigation" class="main-navigation menu-right"&gt;
              &lt;div class="ak-container"&gt;
                  &lt;h1 class="menu-toggle"&gt;&lt;/h1&gt;
  
                  &lt;div class="menu-vimmi-menu-container"&gt;&lt;ul id="menu-vimmi-menu" class="menu"&gt;&lt;li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-72"&gt;&lt;a href="http://localhost:8888/wordpresstest/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"&gt;&lt;a title="About" href="http://localhost:8888/wordpresstest/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-54 current_page_item menu-item-74"&gt;&lt;a title="People" href="http://localhost:8888/wordpresstest/people/"&gt;People&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"&gt;&lt;a href="http://localhost:8888/wordpresstest/news/"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"&gt;&lt;a title="Publications" href="http://localhost:8888/wordpresstest/publications/"&gt;Publications&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"&gt;&lt;a title="Projects" href="http://localhost:8888/wordpresstest/projects/"&gt;Projects&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"&gt;&lt;a title="Present" href="http://localhost:8888/wordpresstest/projects/present/"&gt;Present&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"&gt;&lt;a title="Past" href="http://localhost:8888/wordpresstest/projects/past/"&gt;Past&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;         &lt;/div&gt;
          &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
      &lt;/header&gt;&lt;!-- #masthead --&gt;
  
      &lt;section id="slider-banner"&gt;
              &lt;/section&gt;&lt;!-- #slider-banner --&gt;
          &lt;div id="content" class="site-content"&gt;
  
  &lt;div class="ak-container"&gt;
  
      &lt;div id="primary" class="content-area"&gt;
          &lt;main id="main" class="site-main" role="main"&gt;
  
  
  
  &lt;article id="post-54" class="post-54 page type-page status-publish hentry"&gt;
      &lt;header class="entry-header"&gt;
          &lt;h1 class="entry-title"&gt;People&lt;/h1&gt;
      &lt;/header&gt;&lt;!-- .entry-header --&gt;
  
      &lt;div class="entry-content"&gt;
          &lt;div id="wpapl-people-list-top"&gt;&lt;div id="wpapl-category-list-navmenu"&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="http://localhost:8888/wordpresstest/people/?cat=1"&gt;Senior Researchers&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost:8888/wordpresstest/people/?cat=2"&gt;Researchers&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost:8888/wordpresstest/people/?cat=3"&gt;Associate Researchers&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost:8888/wordpresstest/people/?cat=4"&gt;Junior Researchers&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://localhost:8888/wordpresstest/people/?cat=5"&gt;Trainees&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;h3&gt;&lt;/h3&gt;
          &lt;div class="wpapl-person"&gt;
              &lt;div class="wpapl-image"&gt;&lt;img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/1.thumbnail.png" width="80" height="80"&gt;&lt;/div&gt;
              &lt;div class="wpapl-mininum-information"&gt;
                &lt;h4&gt;&lt;span class="wpapl-person-name"&gt;Francisco Maria Calisto&lt;/span&gt;&lt;/h4&gt;
                &lt;p&gt;&lt;span class="wpapl-people-individual-tag"&gt;Job:&lt;/span&gt; Front-end Software Developer&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Website:&lt;/span&gt; &lt;a href="http://www.franciscocalisto.me/"&gt;http://www.franciscocalisto.me/&lt;/a&gt;&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Email:&lt;/span&gt; &lt;a href="mailto:francisco.calisto@tecnico.ulisboa.pt"&gt;francisco.calisto@tecnico.ulisboa.pt&lt;/a&gt;&lt;/p&gt;
                  &lt;a href="http://localhost:8888/wordpresstest/people/?wpapl_id=1"&gt;Details...&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;br&gt;
  
          &lt;div class="wpapl-person"&gt;
              &lt;div class="wpapl-image"&gt;&lt;img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/2.thumbnail.png" width="80" height="80"&gt;&lt;/div&gt;
              &lt;div class="wpapl-mininum-information"&gt;
                &lt;h4&gt;&lt;span class="wpapl-person-name"&gt;Daniel Gonçalves&lt;/span&gt;&lt;/h4&gt;
                &lt;p&gt;&lt;span class="wpapl-people-individual-tag"&gt;Job:&lt;/span&gt; Senior Researcher&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Website:&lt;/span&gt; &lt;a href="http://danielgoncalves.info"&gt;http://danielgoncalves.info&lt;/a&gt;&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Email:&lt;/span&gt; &lt;a href="mailto:daniel.goncalves@inesc-id.pt"&gt;daniel.goncalves@inesc-id.pt&lt;/a&gt;&lt;/p&gt;
                  &lt;a href="http://localhost:8888/wordpresstest/people/?wpapl_id=2"&gt;Details...&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;br&gt;
  
          &lt;div class="wpapl-person"&gt;
              &lt;div class="wpapl-image"&gt;&lt;img src="http://localhost:8888/wordpresstest/wp-content/uploads/userphoto/3.thumbnail.jpg" width="79" height="80"&gt;&lt;/div&gt;
              &lt;div class="wpapl-mininum-information"&gt;
                &lt;h4&gt;&lt;span class="wpapl-person-name"&gt;Joaquim Armando Pires Jorge&lt;/span&gt;&lt;/h4&gt;
                &lt;p&gt;&lt;span class="wpapl-people-individual-tag"&gt;Job:&lt;/span&gt; Senior Researcher&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Website:&lt;/span&gt; &lt;a href="http://web.ist.utl.pt/jorgej/"&gt;http://web.ist.utl.pt/jorgej/&lt;/a&gt;&lt;br&gt;
                  &lt;span class="wpapl-people-individual-tag"&gt;Email:&lt;/span&gt; &lt;a href="mailto:jaj@inesc-id.pt"&gt;jaj@inesc-id.pt&lt;/a&gt;&lt;/p&gt;
                  &lt;a href="http://localhost:8888/wordpresstest/people/?wpapl_id=3"&gt;Details...&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;br&gt;
      &lt;/div&gt;
              &lt;/div&gt;&lt;!-- .entry-content --&gt;
      &lt;footer class="entry-footer"&gt;&lt;span class="edit-link"&gt;&lt;a class="post-edit-link" href="http://localhost:8888/wordpresstest/wp-admin/post.php?post=54&amp;amp;action=edit"&gt;Edit&lt;/a&gt;&lt;/span&gt;&lt;/footer&gt;&lt;/article&gt;&lt;!-- #post-## --&gt;
  
  
  
          &lt;/main&gt;&lt;!-- #main --&gt;
      &lt;/div&gt;&lt;!-- #primary --&gt;
  
  
  
  &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- #content --&gt;
  
      &lt;footer id="colophon" class="site-footer" role="contentinfo"&gt;
  
  
          &lt;div id="bottom-footer"&gt;
          &lt;div class="ak-container"&gt;
              &lt;h1 class="site-info"&gt;
                  &lt;span class="sep"&gt; Developed by &lt;/span&gt;
                  &lt;a href="http://franciscocalisto.me/" title="FMCalisto" target="_blank"&gt;Francisco Maria Calisto&lt;/a&gt;
              &lt;/h1&gt;&lt;!-- .site-info --&gt;
  
              &lt;div class="copyright"&gt;
                  Copyright © 2015                &lt;a href="http://localhost:8888/wordpresstest"&gt;
                  INESC-ID | IIS | VIMMI              &lt;/a&gt;
                  , Theme by
                  &lt;a href="http://accesspressthemes.com/" title="APL" target="_blank"&gt;AccessPress Lite&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;&lt;!-- #colophon --&gt;
  &lt;/div&gt;&lt;!-- #page --&gt;
  
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-includes/js/admin-bar.min.js?ver=4.2.4"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/jquery.bxslider.min.js?ver=4.1"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/nivo-lightbox.min.js?ver=2.1"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/jquery.actual.min.js?ver=1.0.16"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/skip-link-focus-fix.js?ver=20130115"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:8888/wordpresstest/wp-content/themes/accesspress-lite/js/custom.js?ver=1.1"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          (function() {
              var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
  
              request = true;
  
              b[c] = b[c].replace( rcs, ' ' );
              b[c] += ( window.postMessage &amp;&amp; request ? ' ' : ' no-' ) + cs;
          }());
      &lt;/script&gt;
              &lt;div id="wpadminbar" class=""&gt;
                              &lt;a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1"&gt;Skip to toolbar&lt;/a&gt;
                          &lt;div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0"&gt;
                  &lt;ul id="wp-admin-bar-root-default" class="ab-top-menu"&gt;
          &lt;li id="wp-admin-bar-wp-logo" class="menupop"&gt;&lt;a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/about.php"&gt;&lt;span class="ab-icon"&gt;&lt;/span&gt;&lt;span class="screen-reader-text"&gt;About WordPress&lt;/span&gt;&lt;/a&gt;&lt;div class="ab-sub-wrapper"&gt;&lt;ul id="wp-admin-bar-wp-logo-default" class="ab-submenu"&gt;
          &lt;li id="wp-admin-bar-about"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/about.php"&gt;About WordPress&lt;/a&gt;        &lt;/li&gt;&lt;/ul&gt;&lt;ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"&gt;
          &lt;li id="wp-admin-bar-wporg"&gt;&lt;a class="ab-item" href="https://wordpress.org/"&gt;WordPress.org&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-documentation"&gt;&lt;a class="ab-item" href="https://codex.wordpress.org/"&gt;Documentation&lt;/a&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-support-forums"&gt;&lt;a class="ab-item" href="https://wordpress.org/support/"&gt;Support Forums&lt;/a&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-feedback"&gt;&lt;a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback"&gt;Feedback&lt;/a&gt;     &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-site-name" class="menupop"&gt;&lt;a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/"&gt;INESC-ID | IIS | VIMMI&lt;/a&gt;&lt;div class="ab-sub-wrapper"&gt;&lt;ul id="wp-admin-bar-site-name-default" class="ab-submenu"&gt;
          &lt;li id="wp-admin-bar-dashboard"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/"&gt;Dashboard&lt;/a&gt;       &lt;/li&gt;&lt;/ul&gt;&lt;ul id="wp-admin-bar-appearance" class="ab-submenu"&gt;
          &lt;li id="wp-admin-bar-themes" class="hide-if-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php"&gt;Themes&lt;/a&gt;     &lt;/li&gt;
          &lt;li id="wp-admin-bar-customize-themes" class="hide-if-no-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&amp;amp;autofocus%5Bsection%5D=themes"&gt;Themes&lt;/a&gt;     &lt;/li&gt;
          &lt;li id="wp-admin-bar-customize" class="hide-if-no-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F"&gt;Customize&lt;/a&gt;       &lt;/li&gt;
          &lt;li id="wp-admin-bar-widgets" class="hide-if-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/widgets.php"&gt;Widgets&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-customize-widgets" class="hide-if-no-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&amp;amp;autofocus%5Bpanel%5D=widgets"&gt;Widgets&lt;/a&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-menus"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/nav-menus.php"&gt;Menus&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-background" class="hide-if-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php?page=custom-background"&gt;Background&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-customize-background" class="hide-if-no-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&amp;amp;autofocus%5Bcontrol%5D=background_image"&gt;Background&lt;/a&gt;       &lt;/li&gt;
          &lt;li id="wp-admin-bar-header" class="hide-if-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/themes.php?page=custom-header"&gt;Header&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-customize-header" class="hide-if-no-customize"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpresstest%2Fpeople%2F&amp;amp;autofocus%5Bcontrol%5D=header_image"&gt;Header&lt;/a&gt;       &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-comments"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/edit-comments.php" title="0 comments awaiting moderation"&gt;&lt;span class="ab-icon"&gt;&lt;/span&gt;&lt;span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0"&gt;0&lt;/span&gt;&lt;/a&gt;     &lt;/li&gt;
          &lt;li id="wp-admin-bar-new-content" class="menupop"&gt;&lt;a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php"&gt;&lt;span class="ab-icon"&gt;&lt;/span&gt;&lt;span class="ab-label"&gt;New&lt;/span&gt;&lt;/a&gt;&lt;div class="ab-sub-wrapper"&gt;&lt;ul id="wp-admin-bar-new-content-default" class="ab-submenu"&gt;
          &lt;li id="wp-admin-bar-new-post"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php"&gt;Post&lt;/a&gt;     &lt;/li&gt;
          &lt;li id="wp-admin-bar-new-media"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/media-new.php"&gt;Media&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-new-page"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post-new.php?post_type=page"&gt;Page&lt;/a&gt;      &lt;/li&gt;
          &lt;li id="wp-admin-bar-new-user"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/user-new.php"&gt;User&lt;/a&gt;     &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-edit"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/post.php?post=54&amp;amp;action=edit"&gt;Edit Page&lt;/a&gt;        &lt;/li&gt;&lt;/ul&gt;&lt;ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"&gt;
          &lt;li id="wp-admin-bar-search" class="admin-bar-search"&gt;&lt;div class="ab-item ab-empty-item" tabindex="-1"&gt;&lt;form action="http://localhost:8888/wordpresstest/" method="get" id="adminbarsearch"&gt;&lt;input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"&gt;&lt;label for="adminbar-search" class="screen-reader-text"&gt;Search&lt;/label&gt;&lt;input type="submit" class="adminbar-button" value="Search"&gt;&lt;/form&gt;&lt;/div&gt;        &lt;/li&gt;
          &lt;li id="wp-admin-bar-my-account" class="menupop with-avatar"&gt;&lt;a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wordpresstest/wp-admin/profile.php"&gt;Howdy, FMCalisto&lt;img alt="" src="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=26&amp;amp;d=mm&amp;amp;r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=52&amp;amp;d=mm&amp;amp;r=g 2x" class="avatar avatar-26 photo" height="26" width="26"&gt;&lt;/a&gt;&lt;div class="ab-sub-wrapper"&gt;&lt;ul id="wp-admin-bar-user-actions" class="ab-submenu"&gt;
          &lt;li id="wp-admin-bar-user-info"&gt;&lt;a class="ab-item" tabindex="-1" href="http://localhost:8888/wordpresstest/wp-admin/profile.php"&gt;&lt;img alt="" src="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=64&amp;amp;d=mm&amp;amp;r=g" srcset="http://0.gravatar.com/avatar/38dfa45c2105c434c6665e05e20621cc?s=128&amp;amp;d=mm&amp;amp;r=g 2x" class="avatar avatar-64 photo" height="64" width="64"&gt;&lt;span class="display-name"&gt;FMCalisto&lt;/span&gt;&lt;/a&gt;       &lt;/li&gt;
          &lt;li id="wp-admin-bar-edit-profile"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-admin/profile.php"&gt;Edit My Profile&lt;/a&gt;       &lt;/li&gt;
          &lt;li id="wp-admin-bar-logout"&gt;&lt;a class="ab-item" href="http://localhost:8888/wordpresstest/wp-login.php?action=logout&amp;amp;_wpnonce=e4d49389f5"&gt;Log Out&lt;/a&gt;       &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;        &lt;/li&gt;&lt;/ul&gt;          &lt;/div&gt;
                          &lt;a class="screen-reader-shortcut" href="http://localhost:8888/wordpresstest/wp-login.php?action=logout&amp;amp;_wpnonce=e4d49389f5"&gt;Log Out&lt;/a&gt;
                      &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;(function () {
          return window.SIG_EXT = {};
        })()&lt;/script&gt;&lt;signals-overlay style="display: none;"&gt;&lt;signals-mini-overlay&gt;&lt;signals-icon class="icon-sidekick"&gt;&lt;/signals-icon&gt;&lt;/signals-mini-overlay&gt;&lt;signals-mini-close&gt;&lt;/signals-mini-close&gt;&lt;/signals-overlay&gt;&lt;span style="height: 20px; width: 40px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; border: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAADU0lEQVR42s2WXUhTYRjHz0VEVPRFUGmtVEaFUZFhHxBhsotCU5JwBWEf1EWEEVHQx4UfFWYkFa2biPJiXbUta33OXFtuUXMzJ4bK3Nqay7m5NeZq6h/tPQ+xU20zugjOxR/+7/O8539+5znnwMtNTExwJtMb3L/fiLv3botCSmUjeCaejTOb39AiFothfHxcFIrHY8RksZjBsckJcOIRMfFsHD/SsbExUYpnI8DR0dGUGjSb0byhEJp5Uqg5CTSzc2CQleJbMEj9/ywBcGRkJEk9DQqouEVQT1sK444yWI9UonmTjGqauVLEIlHa9x8lAMbj8SSpp0rwKGMVvg8P46vbg0C7na8z8JsMcgHe7jlEa+edRhiLy8n/TUMfu6EvLElk+U0WtGwrTrdfAGQf5J8iiK4LVzDU28t8JtMSocf8E+l68myaNFXm/6rXslLK7ay5TOunuRvZWpJuvwAYjUaTpOIWoquuAZ219RTaxKYp9BbjycoN5FvL9qH9TBX5rvoGdJythvXYSTxdtRnWylO/ZdqrLsGwszzhWQ593z2KlAwCYCQSSZJ6ehZ0W7bD9VBLgN0NCqr3qR7R2rBrL3pu3Sb/7nDlz2uy6cG0OXk0GTbZXzNp8trsPAQdTj6frlWzN2DcXZGKQQAMh8NJ6rpyHe+PnkCr/CAFdZyvpfpjuvkifLF9wIt1Wwlo0OHie1RvWrKa93RjzfzliTzPKz3ltB0/Tevmwp14wGUgHAzSOoUEwFAolFaaBSuhnslPRkJexUJtZ6v5HtUeLswl33n1BgEY5fvhs9sJ3FAiT+QYyyvoAQJuD0KBAFRTJNAuz5/s3gJgMBhMJwrVFRThM5tY5zUF/A4X1f2fvQTRLCuBreoim0YmAbqNJryvPEXeeq46kaNdkQ/1HCncbJKPs9ZSv2VHGfWsZ2hfkhKAfr8/pdxWKx4wwD69PmVfNSOL+lr2w+gYqHpWDtXt1xQ8AMlWU0e1lqLd/APRHoP8AJqWrQG9gYxcPMsvSJUvAA4MDKTUJ7MZLaVy8v+qT21tcDx/OemePr0RTkNrur4A6PP5xCgBsL+/X4wiQDpuuVxOeL1eMYmYeDY6sOp0z+B0OuHxeEQhxkJMFosJiSO/UinOI/8Pc+l7KKArAT8AAAAASUVORK5CYII=); background-color: transparent;"&gt;&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I'm not sure how to achieve this though and how to solve my problem?</p>
  
  <p>Can anyone suggest how to change the code and most importantly why your solution works?</p>