Centre Center dropdown items under each other
Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:
.uk-navbar-dropdown-nav li > a {
justify-content: center;
}
- Hits: 7
Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:
.uk-navbar-dropdown-nav li > a {
justify-content: center;
}
Navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:
#tm-dialog-mobile .uk-close svg {
width: 30px;
height: auto;
}
Adjust the size according to your requirements.
Go to the item you want to link to.
Create a text box or highlight some text you want to link to. You do not need text to create an anchor point.
Click to open JCE editor then click on the anchor icon a pop up will open.
Fill in the appropriate name/description of the anchor point and insert an anchor icon will appear in the content.
Go to the place or page where you want the link to be accessed come from.
Create a button or text, then link it by adding the full url to the linked page. The final piece of the link should be the name of the anchor point with a # in front of it.
Save and Test the link
.btn-dark, .btn-secondary, .uk-button-secondary {
width:250px;
}
Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:
/*Force toolbar (Top area above header) to show on small screens*/
@media(max-width: @breakpoint-medium) {
.tm-toolbar.uk-visible\@m {
display: block !important;
}
.tm-page {
display: flex;
flex-direction: column;
}
.tm-toolbar {
order: -1;
}
}
You can create anchor points in a section:
Edit > Advanced > ID - say
my-anchor-point
to link to the anchor from a button or similar use '
#my-anchor-point
/*button padding */
.btn, .uk-button {
padding-top: 12px;
padding-bottom: 12px;
}
Navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:
/* bullet list - force paragraph space to match - YOOtheme > STYLE > Base > Margin > Vertical. */
ul:not([class]) li + li {
margin-top: @base-margin-vertical;
}
FULL ANSWER
You could edit the HTML markup and change the opening tag of the "Unnumbered List" element from
<ul>
to
<ul class="uk-list">
This is the recommended approach.
Alternatively, navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:
ul:not([class]) li + li {
margin-top: @base-margin-vertical;
}
This would inherit the default margin between paragraphs as defined via YOOtheme > STYLE > Base > Margin > Vertical.
You can replace the variable @base-margin-vertical by a lenght of your choice. Just make sure to use an integer followed by a unit, like 20px for example.
Put code into the CSS of the element you want to be sticky.
Adjust the position settings.
/*make the button sticky at the bottom*/
.el-element {
position: fixed;
right: 0;
bottom: 2%;
z-index: 1;
}
In the Joomla backend go to Components > RSForm! Pro > Manage Forms.
For each form you use:
Click on the name of the form.
Click on "Form Properties".
Select Responsive Layouts > UIkit 3.x.
Set Options > Load Layout CSS / JS > No.