CODEWITHSUNDEEP
htmlcssnavigationbar
elaira_11
elaira_11

Reputation: 63

Different navigation title for laptop and mobile device using CSS

It is possible to change my navigation menu title "Lorem Ipsum Dolor Sit Amet" (laptop screen) to "LIDSA" (mobile screen) using CSS/Boostrap? How can I do it? Thank you!

Below are the example:

Laptop Screen Mobile Screen

Upvotes: 0

Views: 97

Answers (1)

Hao Wu
Hao Wu

Reputation: 20764

Yes you can, using pseudo class with content and attr() function:

Check it using full screen and try to reduce the width of the window

[data-full]::before {
  content: attr(data-full);
}

@media only screen and (max-width: 520px) {
  [data-short]::before {
    content: attr(data-short);
  }
}
<a href="#" data-full="Lorem Ipsum Dolor Sit Amet" data-short="LIDSA"></a>

Upvotes: 1

Related Questions