Адаптивная навигация без дублирования ссылок? ⇐ Html

[Anonymous]

Недавно я пытался сделать свою собственную адаптивную навигацию и мне удалось, но теперь я хочу преодолеть следующее препятствие, которое должно создать ту же навигацию, но без двух отдельных списков ссылок. Ширина браузера, которая, очевидно, имеет свои недостатки, когда вы не можете изменить размер браузера при мобильном устройстве.

Код: Выделить всё

[list]
[*][url=#top-page]Home[/url]
[*][url=#about]About[/url]
[*][url=#mywork]My Work[/url]
[*][url=#contact]Contact[/url]
[/list]

toggle
[list]
[*][url=#top-page]Home[/url]
[*][url=#about]About[/url]
[*][url=#mywork]My Work[/url]
[*][url=#contact]Contact[/url]
[/list]


< /code>
css < /p>
.mainnav {
width: 100%;
height: auto;
background: #64137B; }

/*Desktop nav*/
.desktopnav {
display: block; }

.desktopnav ul.mainlinks {
list-style-type: none;
margin: 0 auto;
padding: 0;
display: table;
min-height: 50px; }

.desktopnav ul.mainlinks li {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
border-right: 1px solid #A37EAE; }

.desktopnav ul.mainlinks li:first-child {
border-left: 1px solid #A37EAE; }

.desktopnav ul.mainlinks a {
color: white;
text-decoration: none; }

.mobilenav, .desktopnav {
min-height: 50px;
height: auto; }

/*Mobile Nav*/
.mobilenav {
text-align: center; }

.mobilenav, button.navtoggle {
display: none; }

.mobilenav ul.mainlinks {
display: none;
list-style: none;
padding-left: 0px; }

@media (max-width: 768px) {
.desktopnav {
display: none; }

.mobilenav {
display: block; }

button.navtoggle {
display: table-cell;
margin: 5px auto;
text-align: center;
border: 0;
text-indent: 200%;
overflow: hidden;
background: white url(../../images/navbutton.png) center no-repeat;
border: 1px solid #ddd;
border-radius: 5px;
background-size: 80%;
width: 40px;
height: 40px;
outline: none;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; }

button.navtoggle:hover {
opacity: 0.7; }

ul.mainlinks {
background: #8421A0;
margin: 0px;
padding: 0px 0px; }

ul.mainlinks li {
padding: 15px 10px;
border-bottom: 1px solid #A37EAE; }

ul.mainlinks a {
color: white;
text-decoration: none; }
}

У кого -нибудь есть идеи о том, что я мог бы сделать, решить мою проблему?

Подробнее здесь: https://stackoverflow.com/questions/334 ... cate-links