CODEWITHSUNDEEP
cssjquery-mobile
Sahil Grover
Sahil Grover

Reputation: 1915

Css for Link buttons (no text) in page header , using Jquery Mobile

Hey I hve made this sample page for me http://jsfiddle.net/9S3a3/12/ , if we have a look at buttons , there is a slight shadow below them , i want to remove those shadows look, i tried resizing margin padding things but not able to do so . Any solution to this ??

----------Edit----------

I was talking about back button and gear button , see this https://i.sstatic.net/gMTej.png

Upvotes: 0

Views: 417

Answers (2)

Jasper
Jasper

Reputation: 76003

The box-shadows are applied using the .ui-shadow class. So editing that CSS class like below will remove the shadows:

<style>
[data-role="header"] a.ui-shadow {
    box-shadow: none ;
}
</style>

This will remove the box-shadow for any link with the .ui-shadow class that is located inside the data-role="header" element.

Here is a link to an updated version of your fiddle: http://jsfiddle.net/9S3a3/14/

On a side note, I remove the text and box shadow for most elements as it helps improve performance on mobile devices quite a lot.

Upvotes: 1

Lapple
Lapple

Reputation: 3373

I didn't get which buttons are you asking about, however, correct me if I am wrong. Add

#nav_header {
    border-bottom: none;
}

to your CSS (http://jsfiddle.net/9S3a3/13/) to remove the shadow (border) under the Featured, Near, New buttons.

Upvotes: 0

Related Questions