Docs

[minyona]

With button on the top right and links on the top left, including phone number, but not including the navigation drawer that this site has: http://www.miami-institute.com/

[Joao]

Hi There,

This is defenitly Possible

Please follow this example:

Top Bar Content @ Customizer / Header

<a href="#holder" title="Holder Link">Secondary</a> ••• <a href="#holder" title="Holder Link">Navigation</a> ••• <a href="#holder" title="Holder Link">Can</a> ••• <a href="#holder" title="Holder Link">Go</a> ••• <a href="#holder" title="Holder Link">Up</a> • <a href="#holder" title="Holder Link">Here</a>

<div><a href="#holder" title="Holder Link" class="topbarbutton">Button</a> </div>

CSS @ Customizer / Custom / CSS

.x-topbar .x-social-global {
display: none !important;
}

.topbarbutton {
 float: right;  
 padding: 10px 20px;
  background-color: #27ae60;
  color: #fff;
  padding-top: 10px;
  margin-top: -8px;
}

.topbarbutton:hover{
  padding: 10px 20px;
  background-color: #27ae80;
  box-shadow: none;
 margin-top: -8px;
}

Please adjust the size and colors according to your wishes.

Hope that helps,

Joao

[minyona]

So awesome. How would I adjust the colors of the links on the top left?

[Joao]

Hi There,

Please add this code at your your Custom / CSS

.x-topbar .p-info a {

color: red;

}

.x-topbar .p-info a:hover {

color: green;

}

Hope that helps,

Joao

[minyona]

that helped, but it’s wrapping and the last link is always going to the next line. And what if I also want to include a phone number that is not a link, like the miami institute?

[minyona]

This reply has been marked as private.

[Lely]

Hi There,

Please add the following CSS to stop from wrapping:

@media (min-width: 768px){
.x-topbar .p-info {
width: 50%;
}
}

You can add something like this:
<span>Phone Number here</span>

Hope this helps.

[Author]

Posts