Hello X Theme Staff
I am trying to help out a rescue centre get their website put right.
The problem is this new version of X theme has me totally confused and I am struggling to find how to change things.
So my client likes the Icon theme however the main navigation has like a bubble or a button edge appear around it on the hover. We would like to change this to just a line under the text. The colours I can change just no idea how to remove the bubble / button.
Thank you for your assistance.
Hello @RebootDesigns,
Thanks for writing in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to. We provide support to our customers 24/7/365 in the Support Forum. Support questions are answered in the order received and responses may take up to 24 hours (typically sooner). Complex questions or busy times may take longer.
The icon stack has a unique design where the menu looks like a pill button. It is using this CSS built-in the Icon stack style:
.x-navbar .desktop .x-nav>li>a>span {
border: 1px solid transparent;
padding: .875em 1.25em;
border-radius: 100em;
}
Feel free to make adjustments to the code above as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg
Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.
Best Regards.
Hello Ruenel
Ah sorry about that. I had posted the question and then believed I found the answer and deleted it. The theme didn’t change no matter what I did however so I tried to undo the deleting of the question. Then I didn’t hear anything so I thought maybe I had broken it. I thought about flagging it but decided that would be pestering admin for no reason so if I posted another post under, it would be better. However I now know that was actually worse. So thank you for informing me of that.
Fab! I have managed to remove the “pill” shape (good description, I couldn’t think of the word).
Can you tell me how I pop a line in under the navigation titles when the mouse hovers over? and stays when selected to highlight the chosen title - I just need it to come up the same colour as the links.
As adding this code:
display: inline-block;
vertical-align: middle;
border-bottom: 2px solid black;
Just displays the line under all the time and makes it disappear when its selected
I find alot of these tutorials but many don’t seem to apply to Xtheme in the same way. I am not sure why. I did manage to solve my widget alignment question but that took a number of tries before it finally got it to work.
But thank you for the tutorials anyway as some will certainly come in handy.
Thank you for your time
Hi @RebootDesigns,
To add a line on the selected menu and on the mouse hover, please add the code below in your Theme Options > CSS
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: inset 0 -2px 0 0 #000000
}
Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.
Hope that helps.
Thank you.
Thank you. This is very much appreciated.
One other question that support might be able to help me with.
In the Blog section of the website, the feature image is really big!
It’s so big it’s causing the images to blur. Do you know how to reduce the size of this feature image at all?
If it’s outside of Xtheme’s support I understand but I just thought I would ask as I cant seem to find the answer anywhere else.
Thank you again for your time.
Hello @RebootDesigns,
By design, the featured image will display as wide as the content area. You must make sure that when you upload a featured image, the image dimension should be at least 1000x1000 pixels. To better assist you with your blog issue, kindly provide us the URL of your Blog index so that we can check it.
Perhaps this old thread can help you:
Kindly let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.