Docs

[ZerotoOne]

hey there,
just saw a cool navbar and wanted to know, if you could help me to achieve something like this: https://blackrockdigital.github.io/startbootstrap-grayscale/ on my navbar 🙂
thanks a lot

[Nico]

Hi There,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[ZerotoOne]

well it was a thing for the support, a long time ago https://community.theme.co/forums/topic/fixed-navbar-above-content/. So I’am kindly asking for a quick refresh of this topic: https://community.theme.co/forums/topic/fixed-navbar-above-content/, since this code from 2014 won’t apply to the newest updates of X.

Don’t get me wrong, I understand that the community is growing and you are getting more and more requests. But…

I’am a customer for 2 years now and I get a feeling, that the support is getting worse and worse. Are you even reading the topics started or are you just pasting the standard replies for every slightly more complex topic?

I just started another topic dealing with a rather simple button, and just got the reply that I should take a look at the pre defined buttons of X??? You can’t tell me that anybody in the support-team took a look at that link I posted. If this would have been a standard X button I would not have asked for help! This was just bad! this is the topic mentioned: https://community.theme.co/forums/topic/animated-button/

[Rad]

Hi there,

We don’t really cover customization from the ground up but we can provide some tweakings. And it doesn’t always the same all the time. The tweakings provided from the past threads are only applicable for the simple implementation at that time. Given the feature and structure are now becoming complicated, means the same customization isn’t applicable anymore and can’t be considered simple tweaking anymore, but full customization.

Have you tried implementing the recommended customization from your provided thread? You may also find other threads through the forum’s search. Please try them and if there is any issue, then that’s where we can provide some recommendation or additional tweakings. What we’re avoiding is to repeat what’s already been provided from other threads, where we can simply enhance it. You haven’t provided your site’s URL to see the status of your current customization. We can’t start it from zero over and over, but we love to help in the best we can while you’re doing it 🙂

About the animated button, it’s built-in to that theme and never part of X theme. But you can try this,

HTML

<a id="presentation-button" class="button transparent" href="#tabs-section">Discover theme demos</a>

CSS

.button {
    display: inline-block;
    font-size: 10px;
    font-family: "Montserrat";
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: 15px 40px;
    -moz-border-radius: 44px;
    -webkit-border-radius: 44px;
    border-radius: 44px;
    -moz-box-shadow: 0px 3px 6px 1px transparent;
    -webkit-box-shadow: 0px 3px 6px 1px transparent;
    box-shadow: 0px 3px 6px 1px transparent;
    -moz-transform: perspective(0);
    -ms-transform: perspective(0);
    -webkit-transform: perspective(0);
    transform: perspective(0);
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    -webkit-transition: all 0.7s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.7s ease 0s;
}

.button.transparent {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
}

.button:hover {
    -moz-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -webkit-box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    box-shadow: 0px 4px 9px 1px rgba(46,46,46,0.3);
    -moz-transform: perspective(400px);
    -ms-transform: perspective(400px);
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
}

.button.transparent:hover {
    border-color: #a98b69;
    -moz-box-shadow: 0px 4px 5px 1px rgba(255,255,255,0.05);
    -webkit-box-shadow: 0px 4px 5px 1px rgba(255,255,255,0.05);
    box-shadow: 0px 4px 5px 1px rgba(255,255,255,0.05);
}

#top-presentation-section a.button.transparent:hover {
    border-color: #a98b69;
}
#top-presentation-section a.button.transparent {
    font-size: 13px;
    text-transform: none;
    padding: 18px 40px;
    border: 2px solid #a98b69;
}

Thanks for understanding.

[ZerotoOne]

my page is zerotoone.de

okay I used the css you provided, but I could not figure out where to put the html. As you can see the button is currently red 😀

[Christian]

Replicating the feature of your sample site is possible in X with custom development. Regretfully, that would be quite involved so that is outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[ZerotoOne]

okay I understand 🙂 got the navbar to a point I’am very happy with! but there is one little thing that I’d like to be changed…
the line of the hover effect http://prntscr.com/cinf7g should go ‘inside’ the navbar like this http://prntscr.com/cinfhl

hope you understood what I meant, this is how it looks now http://www.zerotoone.de and this is how it should look in the navbar http://rnbtheme.com/

thank you very much 🙂

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
   padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 25px !important;
    margin-right: 25px !important;
}

Hope it helps

Joao

[ZerotoOne]

thank you, but I think there was a little misunderstanding…
I’d like the hover effect to move above the the grey line, separating the navbar from the content below. It is very hard to see in the screenshots, but this is very important for me since it enhances the visibility of the current item on scrolling

[Rad]

Hi there,

Please add this,

.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 -3px 0 0 #a98b69;
}

Cheers!

[ZerotoOne]

thank you that worked, but is it possible to make it overlap the grey line below my navbar, just like in the beginning, but this time inwards? 🙂

[Nabeel A]

Hi again,

I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[ZerotoOne]

with the code you gave me, my navbar looks like this: http://prntscr.com/cje9pn the marker is above the grey line.
but I want the marker to overlap the grey line like this: http://prntscr.com/cjeaby

thank you 🙂

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.x-navbar-inner {
    margin-bottom: -1px;
}

Hope that helps. 🙂

[Author]

Posts