Navigation Collapsed Sub Links

[gunesinan]

Hi,

I have a question about the flex property of the Navigation Collapsed element Sub-Links.

What I am trying to achieve is, I want to divide the menu text item (Menu>Navigation Label) into two parts, and position them using the spece-between property, one item on the left and the other on the right.

When I create a WP menu item, I use this in the Navigation Label field:

<div class="x-anchor-content">
<div>Left Text</div>
<div>Right Text</div></div>

and on the element CSS, I use this:

.x-anchor-content {
display: flex;
justify-content: space-between;
}

However it is not working.

Am I using wrong pointers? Should I create a class? I tried but it didn’t work.

In the secure note you can find the URL of the text page that I am working on.

I would be really glad if you can help.

Thanks

Gunes

PS: Stretching “.x-anchor-text-primary” throughout its parent container will most likely solve my problem, however, I couldn’t figure out how to do that too.

[ruenel]

Hello Gunes,

Thanks for posting in!

Please remove your custom code and then find the “Navigation Collapsed > Sub Links” tab.

You need to set the Child Placement to “Row” and then set the horizontal alignment to “Space Between”.

If needed, set the left and right padding to 0.

Hope this helps.

[gunesinan]

Hi RueNel,

Thanks for the answer. I already tried this before creating the topic but it didn’t work:

@ruenel

You need to set the Child Placement to “Row” and then set the horizontal alignment to “Space Between”.

Maybe I couldn’t explain it well. I removed the CSS, and here is how it looks now.

I want to use the space-between property to align “SUB-PRODUCT TITLE” to the left and “price($999)” to the right, as shown above. To do this, I thought I should first go to my WordPress Menu and place “SUB-PRODUCT TITLE” and “product price” into separate divs. In my original topic, I tried to explain it with “left text” and " right text".

How can I do this best, or can I?

Thanks a lot.

PS: This may not be a theme-related question, but it looks like an easy one for you. I also want you to know that I am using Pro to make the first website in my 41 years of life - which turned out to be a highly complicated and feature-rich website, thanks to your support here and on the One platform. I couldn’t do it without the support you guys provide here.

[tristup]

Hi Gunes,

To make the price right aligned, you need to strech the x-anchor-text to 100% and the price section to float:right. Please add the following custom CSS code to the Theme Options > CSS or Page CSS to achieve.

.x-anchor-text
{
    width: 100% !important;
}
.woocommerce-Price-amount.amount
{
    float: right !Important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[gunesinan]

Tristup,

This is awesome! I was exactly trying to achieve this.

Thank you so much!

[prakash_s]

Hello Gunes,

Glad that we were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Have a great day!
Thanks