Home>Support>Vantage theme using breadcrumb-navxt CSS issue

Vantage theme using breadcrumb-navxt CSS issue

By Simo, 7 years ago. Last reply by Simo, 7 years ago.

Hi I am using the vantage theme :):)

Experimenting with having breadcrumbs the forum suggested the link below to try.

Breadcrumb NavXT

I downloaded and it installed OK, the latest version didn’t need me to copy any code anywhere for it to display just below the masthead row; which is not what the “plugin details instructions”” said. I did not change any of the default settings while trialling it and all look good.

As I wanted to blend the default colours into my theme I search the MTEKK site and found the code below to insert in the custom CSS file which they said would work, sorry but didn’t.

.breadcrumbs{
font-size: 1.1em;
background-color: #fcfcfc;
color: #698694;
margin: 30px 0 0 10px;
position: relative;
float: left;
}
Any of you good fellows have any recent experience using it with Vantage? To ask MTEKK to you pay for a subscription to get support and as I am not 100% on the plugin I didn’t want to do that yet. :(

Anyway keep up the great work and hopefully you can suggest something.

Simos.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Simo,

    I’m personally not familiar with that plugin all that much, but I should definitely be able to assist with the CSS. Do you have a public URL where we can take a look at your setup?

  2. 7 years, 7 months ago Simo

    Hi Alex,

    Many thanks for replying, chatnsurf.co.uk

    Breadcrumbs are not activated on home page but are on sub pages.

    The background colour is suppose to be same as surrounding areas. Saying that I am starting to like the default effect :):)

    As ever many thanks for any help

    Simos

  3. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Simo,

    If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:

    #navxt-breadcrumbs {
font-size: 1.1em;
background-color: #fcfcfc;
margin: 30px 0 0 10px;
position: relative;
float: left;
}

#navxt-breadcrumbs a {
color: #698694;
}

#navxt-breadcrumbs a:hover {
color: #0f0;
}

    The last selector is for the hover color on the breadcrumbs. Be sure to adjust it to your desired color.

    You might also need to install the SiteOrigin CSS Editor.

  4. 7 years, 7 months ago Simo

    Hi Alex,

    Thanks for the quick response.

    Thanks for the tip but I have the CSS editor installed :).

    One other point is there a technique for copying and pasting within the editor as whenever I paste multi lined code into the CSS it seems to put it all into one numbered line??

    I amended as you said; see below, but nothing changed? I did code in really different colours e.g. pink, but still nothing?

    /*breadcumb styles*/
    #navtx.breadcrumbs {
    font-size: 1.1em;
    background-color: #fcfcfc;
    margin: 30px 0 0 10px;
    position: relative;
    float: left;
    }
    #navtx-breadcrumbs a {
    color: #698694;
    }
    #navxt-breadcrumbs ahover {
    color: #ffffff;
    }

    As ever many thanks for your help

    Simos

  5. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Simo,

    I can’t seem to replicate the copy and paste issue you’re describing. Can you please tell me what browser you’re using and if you’re able to replicate that issue in another browser?

    Okay so your selectors have changed slightly which is why they’re not working. Please use the following CSS instead:

    /*breadcumb styles*/
#navxt-breadcrumbs {
font-size: 1.1em;
background-color: #fcfcfc;
margin: 30px 0 0 10px;
position: relative;
float: left;
}

#navtx-breadcrumbs a {
color: #698694;
}

#navxt-breadcrumbs a:hover {
color: #ffffff;
}
  6. 7 years, 7 months ago Simo

    Hi Alex,

    I changed as you said and seems to have worked but has affected other aspects of page?

    I will leave it as it is for you to see: http://chatnsurf.co.uk/recruitment before I start playing:)

    By the way I am using windows 7 ie 11 and is the only browser but will try installing another later.

    many thanks

    Simos

  7. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Simo,

    Ah, that’s due to some of the properties you set. Please replace:

    /*breadcumb styles*/
#navxt-breadcrumbs {
font-size: 1.1em;
background-color: #fcfcfc;
margin: 30px 0 0 10px;
position: relative;
float: left;
}

    With:

    /*breadcumb styles*/
#navxt-breadcrumbs {
font-size: 1.1em;
background-color: #fcfcfc;
margin: 30px 0 0 10px;
position: relative;
}
  8. 7 years, 7 months ago Simo

    Hi Alex,

    you are a genius, works great.

    Many thanks for all your support and advice.

    Regards

    Simos

  9. 7 years, 7 months ago Simo

    Hi Alex,

    I have been doing some more testing and the hover highlight code works :) however the code for the breadcrumb when not selected doesn’t appear to?? I changed to various colours to test it as the end colour is suppose to be #455368?

    ””””””’
    #navtx-breadcrumbs a {
    color: #698694;
    }
    ”””””””””””

    Any ideas.

    Many thanks

    Simos

  10. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Simo,

    Your selector has a typo – It’s #navxt-breadcrumbs a

  11. 7 years, 7 months ago Simo

    Hi Alex,

    And I have just got new glasses… :):)

    Many thanks and sorry for sdnh error.

    Simo

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More