Docs

[xdalex09]

Hi there I’m trying to re-create two stacked button from the sample site in my ubermenu.

The sample site is:

Home

I’ve attached a screenshot of two buttons stacked (Donate & Subscribe). What’s the code for that and what would be the associated CSS?

[Nico]

Hi There,

Thanks for writing in.

Base on the sample site, Both of the bottom are enclosed with a div. To illustrate it well I will show you some sample code that will replicate it.

<div style="width:100%;">
  <a style="background:#eee;margin-bottom: 1px;display: block;">First button</a>
  <a style="background:#eee;display: block;">Second button</a>
</div>

Would you mind sharing us your URL so we could check what you need to add to achieve the button in the sample site.

Thanks.

[xdalex09]

This reply has been marked as private.

[xdalex09]

Also, on a somewhat separate note, I want to make it so that as smaller display devices as the screen size gets smaller, that the logo, two buttons (we are currently implementing), and search icon remain up to mobile phone size. Could you advise on that too? The lifeteen site somewhat accomplishes that too.

[Paul R]

Hi,

Please change the html code to this.

<div class="my-buttons">
  <a class="first-button">First button</a>
  <a class="second-button">Second button</a>
</div>

Then add this in Custom CSS

.my-buttons {
   width:100%;
}

.my-buttons .first-button,
.my-buttons .second-button {
    display:block;
    background:#eee;
    padding: 0 20px;
    line-height:50px;
}

.my-buttons .first-button {
    margin-bottom: 1px;
}

Hope that helps

[xdalex09]

Thanks that is getting much better. Could you advise on 3 things?
(1) In the div where do I add the link or href and how does that change the code?
(2) In the CSS, can you point out the parameters to add to the code to achieve the following? Change to “all uppercase”, font color, background color, trigger font color, trigger background color?
(3) Also, I think you missed one of my questions above. Here it is again: I want to make it so that as smaller display devices as the screen size gets smaller, that the logo, two buttons (we are currently implementing), and search icon remain up on the first row up to mobile phone size. The rest of the menu items should move to the second row as the size of the display devices decrease. Could you advise on that too? This lifeteen site somewhat accomplishes that too (http://lifeteen.com/).

[xdalex09]

For (2), I was able to complete the CSS for font color, background, and uppercase. Just need the trigger/hover commands.

[Joao]

Hi There,

Please update :

<div class="my-buttons">
  <a class="first-button">First button</a>
  <a class="second-button">Second button</a>
</div>

to:

<div class="my-buttons">
  <a href="example.com" class="first-button">First button</a>
  <a href="example.com/example" class="second-button">Second button</a>
</div>

Add the following CSS.

.my-buttons .first-button:hover
.my-buttons .second-button:hover {

CSS RULES HERE
}

(3) It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

Hope that helps

[Author]

Posts