Hello;
Is it possible to decrease the size of the mobile logo, please
Hi @elise83,
Thanks for reaching out!
I check your websites and your are using X theme. Decreasing the size of the mobile logo will require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.
On the other hand, you can do it with Pro theme without any customization with the help of Header and Footer builder and also Hide and show content option inside the builder. Luckily, your license code is eligible for the free upgrade from X to Pro.
Please check this article on how you can convert X to Pro:
Hope that helps.
Thank you.
Hello;
Thanks for replaying,
please can you point me in any 3d party developers or something(a code or any thing so i can solve this problem).
Thanks in advance
Hey, @elise83! Thanks for writing in…we do not recommend an particular 3rd party developers, but this type of change is relatively straightforward, so I would look into implementing it yourself as it likely would not be worth the cost of what it would take for someone to jump in and adjust it. As @marc_a mentioned above, we cannot provide assistance with involved customizations as they are outside the scope of support, but for this particular instance I would like to help provide some context for you on making customizations like this as it can help serve as a framework for you moving forward on small adjustments like this.
Essentially, you will need to adjust the width of your logo using a bit of custom CSS either via the Global CSS code editor in your Builders, or a child theme. You can learn more about the in-built code editors and child themes in our online documentation:
Once you decide how you want to implement the code, you’ll need to target the logo using a CSS class selector. If you are new to CSS and how to target elements and style them, you can learn more about this here:
In this particular case, the element you are going to want to adjust is the x-brand element, because if we inspect the logo using the browser’s dev tools, you can see this class in the markup:
Finally, since you’re wanting to adjust this on a smaller screen size, you will need to implement a media query to localize this style only on smaller devices so that it doesn’t get applied everywhere. Again, if you are new to media queries, there are many great resources about this online. Here is one such article I found with a quick search:
Ultimately, your code will look something like the following:
@media screen and (max-width: 500px) {
.x-brand {
width: 100px;
}
}
This snippet is saying that when the viewport of any device viewing your site is smaller than 500px, it will apply this updated width value to overwrite the default given by the theme.
You will need to implement this snippet as you see fit in addition to customizing the values to suit your needs, but hopefully this gives you a bit of context surrounding how to introduce customizations into your theme if and when you need them. Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.