mark l chaves

Hello,

I’m pretty new to the theme. So, I don’t know if there are settings or options for doing this.

If you want to use custom CSS, you can try adding these snippets to your site.

Change sidebar from being stacked on mobile to be in a row.

aside {
    margin: 0 2% !important;
}

.sidebar-main {
    display: flex;
    align-content: space-between;
}

Change footer from being stacked to be in a row 1 x 4 or 2 x 2. Use one or the other, not both.

/* For 1 x 4 */
#colophon .ast-container .ast-row {
    display: flex;
}

/* For 2 x 2 */
#colophon .ast-container .ast-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
#colophon .ast-container .ast-row::before {
    display: none;
}

How to add custom CSS to WordPress.

• This reply was modified 6 years, 3 months ago by mark l chaves. Reason: Replaced markdown code syntax with forum code syntax

Hi @furudo86,

If you need more ideas, I keep a set of link styling samples up on CodePen.

We’d have to look at your page to give the exact CSS selector you need. Or, you can find out yourself by learning how to use Firefox or Chrome dev tools.

https://developer.mozilla.org/en-US/docs/Tools

https://developers.google.com/web/tools/chrome-devtools/

How to Add CSS to WordPress

Shout if you have any more questions.

Happy coding! 😉

• This reply was modified 6 years, 3 months ago by mark l chaves. Reason: Link to how-to CSS to WP

Hi @anthonymo,

I am also using Astra with Gutenberg. There shouldn’t be any need to use third-party plugins to set the alt text.

Here’s how I set an image alt tag.

• Open a page in Gutenberg
• Select an image block
• Edit the Alt Text found in the Block > Image settings
• Preview or Update the page
• Inspect the image using Firefox or Chrome dev tools

Here are screen grabs from the process I followed above.

Adding Alt Text in Astra Using Gutenberg

Shout if you have any questions!

• This reply was modified 6 years, 3 months ago by mark l chaves.

Just following up.

On my Astra site (no Elementor), here’s what my mobile menu code looks like.

HTML

<span class="menu-toggle-icon"></span>

CSS

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
    content: "\e5d2";
    font-family: 'Astra';
    text-decoration: inherit;
}

Screen grab https://imgur.com/a/hLe6DOO

If you add this custom CSS, you should see the bars show up. But, then you’ll need to add custom code for the animation from bars to an “X”. Which is doable if you know how to. I’m sure I’ve got an example I can dig up if needed.

.fa.fa-navicon::before {
    content: "\e5d2";
    font-family: Astra;
}

How to add custom CSS to WordPress.

This is a band-aid fix for sure. I would still try to get an official fix from Elementor and Brainstorm Force (Astra).

Good luck!

Hi,

This could be a conflict. Maybe with Font Awesome versions? If I change your code from

<i class="fa fa-navicon"></i>

to

<i class="fa fa-bars" aria-hidden="true"></i>

I see the hamburger menu.

Screen grab.

View post on imgur.com

Reference

https://fontawesome.com/v4.7.0/icon/bars

Have you tried posting your issue to the Elementor forum?

Hi @svodom,

You have to be an admin to get access to Appearance > Widgets.

You can customise WordPress to change privileges. But, it’s a Catch-22. You need to be an admin and know PHP to do that.

Read more in this related thread.

https://wordpress.stackexchange.com/questions/28416/give-editor-access-to-sidebar

Here’s the official WordPress doc on User Roles. Unfortunately, it doesn’t explicitly say who has access to Appearance > Widgets. I think it needs to IMHO.

https://en.support.wordpress.com/user-roles/

Cheers!

Hi @jacqste,

Ok. Thanks. Now we know:

1) The current header Donate button goes to https://interland3.donorperfect.net/weblink/weblink.aspx?name=evols&id=1

2) It should go to the new https://evols.org/donate

3) I see your footer Donate Now link goes to https://evols.org/donate

I would definitely reach out to the theme provider for this issue. But, if you want to try more troubleshooting you can:

1) Clear your server cache. Or, turn off server-side caching for now. Bring up your site in incognito or private mode.

2) Disable any plugins that look like they could affect the top menu buttons.

3) Change the link to the Volunteer Login button and see if the change takes effect. Just to test since it’s in the same HTML div tag as the Donate button.

Good luck!

• This reply was modified 6 years, 4 months ago by mark l chaves. Reason: Added incognito suggestion

Hi @ipconfig,

I hope you’re having a great day too. Thanks for the screen grab.

In the most general case, without looking at your code as @sterndata refers to, you can try this custom CSS to remove the extra space under the para and above the unordered list.

p {
  margin-bottom: 0;
}

ul {
  margin-top: 0;
  padding-left: 1em;
}

Here’s a live view.

This code would affect all paragraphs and unordered lists. So you would have to make it more specific to meet your needs.

How to add CSS to WordPress.

Shout if you have any questions! 🙂

• This reply was modified 6 years, 4 months ago by mark l chaves. Reason: Typo