Breadcrumb distort on mobile view and in Chrome

HTML & CSS
, ,
1

Hi,

I am trying to make a breadcrumb, for that I am using bootstrap Nav-pills my Arrow is working in Firefox and but distorting in mobile view and in Chrome.

Please suggest me if I can achieve the same from any other way also.

I need to achive just like my attached image result.

HTML:

<div id="ServiceTabNavPill" class="clearfix">
                                               <ul class="nav nav-pills">                                                      
                                                  <li id="" class=""><a id="" onclick="" href="#">Gold 40 Mbps 2 Years Contract<span class="right_Arrow_grey">&#9670;</span></a></li>
                                               </ul>                                                  
                                            </div>

CSS:

#ServiceTabNavPill .nav-pills > li > a > span {
    color: #ccc;
    float: right;
    font-size: 56px;
    margin-right: -54px;
    margin-top: -30px;
}


#ServiceTabNavPill .nav > li > a{
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
margin:0px !important;
}
#ServiceTabNavPill .nav > li > a:hover{
background-color: #ccc;
}

#ServiceTabNavPill .nav-pills > li{
margin-right: 0px;
}

#ServiceTabNavPill{
    padding-top: 20px;
    margin-bottom:10px;
}

your early reply appreciated, Thanks in advance…

2

You can achieve best results if you format your code the way it has been requested of you many times.

(1) create a “working page” that demonstrates the issue.

Starts with <!doctype>, ends with </html>, demonstrates the issue so we can see exactly what you see.

(2) paste your HTML and CSS between lines that contain three backticks.

```
your html and css here
```

or

(3) highlight your code and click the </> icon in the editor’s menu.

Note: There is no image in the above rectangle that you posted. If you can’t see it, then neither can we.

Your early cooperation appreciated. Otherwise expect to wait until a moderator has time to repair your lazy presentation.

Thanks in advance.

3

Thanks for your reply ronpat,

I can understand that I should upload my working page, but I have some limitation to upload my workings on server that’s why I cant upload my page for demonstration.

I have uploaded my image again now you can see that.

4

A “working page” does not have to include all of your business code, it only has to include enough code to demonstrate the issue. Again, that means that we see the same thing that you see happening.

You can also edit the HTML and CSS in your above posts and add the three backticks before and after each group of code, or highlight the group of code and click the </> button in the editor’s menu bar. That way it will keep its formatting and be visible.

Help us help you.

Thank you in advance.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.