Почему мое меню навигации работает при любом размере страницы на компьютерах Windows и Mac, но не на iPad и телефоне And

Почему мое меню навигации работает при любом размере страницы на компьютерах Windows и Mac, но не на iPad и телефоне And ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Почему мое меню навигации работает при любом размере страницы на компьютерах Windows и Mac, но не на iPad и телефоне And

Цитата

Сообщение Anonymous » 17 апр 2024, 22:49

Я создал веб-сайт в качестве услуги для кого-то, кто не был готов к просьбе сделать его удобным для мобильных устройств. Общий код, скорее всего, разочарует, но он был сделан таким образом, поскольку ему приходится работать с какой-то нишевой устаревшей технологией. А потому что я заржавел.
В любом случае, оно работает достаточно хорошо, за исключением навигационного меню, которое по желанию меняется на раскрывающееся меню для мобильных устройств, но ничего не выпадает и становится неактивным.
Я отредактировал этот пост, включив в него весь код. Если бы кто-нибудь мог сказать мне, как решить эту проблему, это было бы великолепно.
Я совершенно уверен, что создал это меню на основе этого:
Меню W3C
CSS:

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

/* Main page body */

.bodyHome {
margin: 0px;
padding: 0px;
text-align: center;
align-items: center;

}

/* End of main page body */

/* CSS Grid instead of old-fashioned tables */

@media screen and (max-width: 1024px) {

.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #ffffff;
padding: 0px;
border: 0px;
margin-right: 0px;
width: 100%;
}

.location { grid-area: location;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0px;
border-bottom: 1px solid #922B21;
}

.content_01 { grid-area: content_01;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_02 { grid-area: content_02;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_03 { grid-area: content_03;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_04 { grid-area: content_04;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_05 { grid-area: content_05;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_06 { grid-area: content_06;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_07 { grid-area: content_07;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_08 { grid-area: content_08;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_09 { grid-area: content_09;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_10 { grid-area: content_10;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_11 { grid-area: content_11;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_12 { grid-area: content_12;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_13 { grid-area: content_13;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_14 { grid-area: content_14;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_15 { grid-area: content_15;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_16 { grid-area: content_16;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_17 { grid-area: content_17;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_18 { grid-area: content_18;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.footer { grid-area: footer;
background-color: #000000;
padding: 10px;
border: 0px;
width: 100%;
}
}

@media screen and (min-width: 1025px) {

.container {  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"topnav topnav"
"location location"
"content_01 content_02"
"content_03 content_04"
"content_05 content_06"
"content_07 content_08"
"content_09 content_10"
"content_11 content_12"
"content_13 content_14"
"content_15 content_16"
"content_17 content_18"
"footer footer";
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 1280px;
}

.location { grid-area: location;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0px;
border-bottom: 1px solid #922B21;
background-color: #ffffff;
}

.content_01 { grid-area: content_01;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_02 { grid-area: content_02;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_03 { grid-area: content_03;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_04 { grid-area: content_04;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_05 { grid-area: content_05;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_06 { grid-area: content_06;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_07 { grid-area: content_07;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_08 { grid-area: content_08;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_09 { grid-area: content_09;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_10 { grid-area: content_10;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_11 { grid-area: content_11;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_12 { grid-area: content_12;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_13 { grid-area: content_13;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_14 { grid-area: content_14;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_15 { grid-area: content_15;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_16 { grid-area: content_16;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_17 { grid-area: content_17;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_18 { grid-area: content_18;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.footer { grid-area: footer;
background-color: #000000;
padding: 10px;
border: 0px;
}
}

/* End of CSS Grid */

/* Navigation bar */

.topnav {
overflow: hidden;
background-color: #efe9b4;
border-bottom: 2px solid #922B21;
}

.topnav a {
float: right;
display: block;
color: #922B21;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.active {
background-color: #fffdeb;
color: #922B21;
}

.contact {
color: #922B21;
padding: 14px 16px;
}

.topnav .icon {
display: none;
}

.dropdown {
float: right;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: #922B21;
padding: 14px 16px;
background-color: #efe9b4;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #efe9b4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: #922B21;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #fffdeb;
color: #922B21;
}

.dropdown-content a:hover {
background-color: #fffdeb;
color: #922B21;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (min-width: 1025px) {
.topnav {
grid-column: span 2;
width: 100%;
}
}

@media screen and (max-width: 1024px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}

}

/* End of navigation bar */

/* Main content colour blocks start */

.rowprod:after {
content: "";
display: table;
clear: both;
}

.colleftprod {
background-color: #ffffff;
padding: 10px;
border: 0px;
width: 35%;
float: left;
text-align: left;
}

.colrightprod {
background-color: #ffffff;
padding: 10px;
border: 0px;
width: 35%;
float: right;
text-align: right;
}
/* Main content colour blocks end */

/* Text start */

.pBody {
font-size: 12pt;
}

.pBodyHome {
font-size: 18pt;
}

.h4BodyHome {
font-size: 36pt;
color: #922B21;
}
.hProd1 {
font-size: 36pt;
color: #922B21;
}

.hProd2 {
font-size: 24pt;
color: #922B21;
}

.pProdBod {
font-size: 12pt;
}

.pProdNav {
font-size: 11pt;
color: #922B21;
}
/* Text end */

/* Links start */

a.pbodylink:link {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

a.pbodylink:hover {
font-size: 12pt;
color: #922B21;
text-decoration: underline;
}

a.pbodylink:visited {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

a.pbodylink:active {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

.prodbodnavlink:link {
font-size: 11pt;
text-decoration: none;
color: #922B21;
}

.prodbodnavlink:hover {
font-size: 11pt;
text-decoration: underline;
color: #922B21;
}

.prodbodnavlink:visited {
font-size: 11pt;
text-decoration: none;
color: #922B21;
}

.prodbodnavlink:active {
font-size: 11pt;
text-decoration: none;
color: #d1d1d1;
}

/* Links end */

.buybutton {
background-color: #922B21;
border: none;
border-radius: 10px;
color: #efe9b4;
padding: 6px 6px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 11px;
}

a img {
border: none;
max-width: 85%;
max-height: auto;
/* border-width: 0; */
/* border-style: none; */
}

.rlogo {
border: none;
padding-bottom: 5px;
padding-left: 5px;
padding-top: 8px;
max-width: 85%;
max-height: auto;
float: left;
/* border-width: 0; */
/* border-style: none;  */
}

.rlogodiv {
height: 50px;
display: flex;
float: left;
justify-content: center;
}

HTML:

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



RComp | Home










[i]
[url=https://docs.google.com/forms/d/e/1FAIpQLSdAM2pywG39qjg8snRHxqkOqZK_6eQg19X3x8y07JZEkuXmpQ/viewform?usp=sf_link]Contact[/url]

RCI
[/i]


[url=/desktop]Desktop[/url]
[url=/laptop]Laptop[/url]
[url=/network]Network[/url]
[url=/sound]Sound[/url]
[url=/entertainment]Entertainment[/url]



RComp
[i][/i]


[url=/internet]Internet[/url]
[url=/office]Office[/url]
[url=/graphics]Graphics[/url]
[url=/security]Security[/url]
[url=/genealogy]Genealogy[/url]


[url=javascript:void(0);]☰[/url]




[h4]4té2. The answer to everything.[/h4]
[url=/desktop/4te2/]
[img]images/4te2/front.png[/img]
[/url]
Runs RISC OS 5. Runs Linux. Is powerful. Is affordable. Any questions?

[h4]Light in weight. Heavy on productivity.[/h4]
[url=/laptop/armbook/]
[img]images/pinebook/pbpro1.png[/img]
[/url]
Weighing in at a mere 1.04kg, the marriage of RISC OS to this ARM-powered laptop results in a highly portable solution that can be used productively for up to 14 hours.

[h4]You buy.  We deliver.[/h4]
[url=http://www.plingstore.org.uk]
[img]images/plingstore/pling-graphic.png[/img]
[/url]
From databases to DTP, and everything inbetween, !Store lets you search, purchase and download RISC OS software directly to your desktop.

[h4]Computing without limits.[/h4]
[url=/desktop/timachine]
[img]images/timachine/timachine.jpg[/img]
[/url]
For data-rich applications, TiMachine excels. A pairing of Elesar's Titanium motherboard and RComp Interactive's hardware expertise, TiMachine's 1.5GHz processor and solid state storage make short work of database and graphics tasks. And when it comes to entertainment, TiMachine is no slouch either, its raw power easily able to provide smooth gameplay on all currently available RISC OS titles.




function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

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

Подробнее здесь: https://stackoverflow.com/questions/781 ... -computers

1713383351

Anonymous

Я создал веб-сайт в качестве услуги для кого-то, кто не был готов к просьбе сделать его удобным для мобильных устройств. Общий код, скорее всего, разочарует, но он был сделан таким образом, поскольку ему приходится работать с какой-то нишевой устаревшей технологией. А потому что я заржавел.
В любом случае, оно работает достаточно хорошо, за исключением навигационного меню, которое по желанию меняется на раскрывающееся меню для мобильных устройств, но ничего не выпадает и становится неактивным.
Я отредактировал этот пост, включив в него весь код.  Если бы кто-нибудь мог сказать мне, как решить эту проблему, это было бы великолепно.
Я совершенно уверен, что создал это меню на основе этого:
Меню W3C
CSS:
[code]/* Main page body */

.bodyHome {
margin: 0px;
padding: 0px;
text-align: center;
align-items: center;

}

/* End of main page body */

/* CSS Grid instead of old-fashioned tables */

@media screen and (max-width: 1024px) {

.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #ffffff;
padding: 0px;
border: 0px;
margin-right: 0px;
width: 100%;
}

.location { grid-area: location;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0px;
border-bottom: 1px solid #922B21;
}

.content_01 { grid-area: content_01;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_02 { grid-area: content_02;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_03 { grid-area: content_03;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_04 { grid-area: content_04;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_05 { grid-area: content_05;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_06 { grid-area: content_06;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_07 { grid-area: content_07;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_08 { grid-area: content_08;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_09 { grid-area: content_09;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_10 { grid-area: content_10;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_11 { grid-area: content_11;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_12 { grid-area: content_12;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_13 { grid-area: content_13;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_14 { grid-area: content_14;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_15 { grid-area: content_15;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_16 { grid-area: content_16;
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_17 { grid-area: content_17;
background-color: #fffdeb;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.content_18 { grid-area: content_18;
background-color: #efe9b4;
padding: 10px;
border: 0px;
max-width: 100%;
flex: 1;
}

.footer { grid-area: footer;
background-color: #000000;
padding: 10px;
border: 0px;
width: 100%;
}
}

@media screen and (min-width: 1025px) {

.container {  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"topnav topnav"
"location location"
"content_01 content_02"
"content_03 content_04"
"content_05 content_06"
"content_07 content_08"
"content_09 content_10"
"content_11 content_12"
"content_13 content_14"
"content_15 content_16"
"content_17 content_18"
"footer footer";
background-color: #ffffff;
padding: 10px;
border: 0px;
max-width: 1280px;
}

.location { grid-area: location;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0px;
border-bottom: 1px solid #922B21;
background-color: #ffffff;
}

.content_01 { grid-area: content_01;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_02 { grid-area: content_02;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_03 { grid-area: content_03;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_04 { grid-area: content_04;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_05 { grid-area: content_05;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_06 { grid-area: content_06;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_07 { grid-area: content_07;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_08 { grid-area: content_08;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_09 { grid-area: content_09;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_10 { grid-area: content_10;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_11 { grid-area: content_11;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_12 { grid-area: content_12;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_13 { grid-area: content_13;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_14 { grid-area: content_14;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_15 { grid-area: content_15;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.content_16 { grid-area: content_16;
background-color: #ffffff;
padding: 10px;
border: 0px;
}

.content_17 { grid-area: content_17;
background-color: #fffdeb;
padding: 10px;
border: 0px;
}

.content_18 { grid-area: content_18;
background-color: #efe9b4;
padding: 10px;
border: 0px;
}

.footer { grid-area: footer;
background-color: #000000;
padding: 10px;
border: 0px;
}
}

/* End of CSS Grid */

/* Navigation bar */

.topnav {
overflow: hidden;
background-color: #efe9b4;
border-bottom: 2px solid #922B21;
}

.topnav a {
float: right;
display: block;
color: #922B21;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.active {
background-color: #fffdeb;
color: #922B21;
}

.contact {
color: #922B21;
padding: 14px 16px;
}

.topnav .icon {
display: none;
}

.dropdown {
float: right;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: #922B21;
padding: 14px 16px;
background-color: #efe9b4;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #efe9b4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: #922B21;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #fffdeb;
color: #922B21;
}

.dropdown-content a:hover {
background-color: #fffdeb;
color: #922B21;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (min-width: 1025px) {
.topnav {
grid-column: span 2;
width: 100%;
}
}

@media screen and (max-width: 1024px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}

}

/* End of navigation bar */

/* Main content colour blocks start */

.rowprod:after {
content: "";
display: table;
clear: both;
}

.colleftprod {
background-color: #ffffff;
padding: 10px;
border: 0px;
width: 35%;
float: left;
text-align: left;
}

.colrightprod {
background-color: #ffffff;
padding: 10px;
border: 0px;
width: 35%;
float: right;
text-align: right;
}
/* Main content colour blocks end */

/* Text start */

.pBody {
font-size: 12pt;
}

.pBodyHome {
font-size: 18pt;
}

.h4BodyHome {
font-size: 36pt;
color: #922B21;
}
.hProd1 {
font-size: 36pt;
color: #922B21;
}

.hProd2 {
font-size: 24pt;
color: #922B21;
}

.pProdBod {
font-size: 12pt;
}

.pProdNav {
font-size: 11pt;
color: #922B21;
}
/* Text end */

/* Links start */

a.pbodylink:link {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

a.pbodylink:hover {
font-size: 12pt;
color: #922B21;
text-decoration: underline;
}

a.pbodylink:visited {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

a.pbodylink:active {
font-size: 12pt;
color: #922B21;
text-decoration: none;
}

.prodbodnavlink:link {
font-size: 11pt;
text-decoration: none;
color: #922B21;
}

.prodbodnavlink:hover {
font-size: 11pt;
text-decoration: underline;
color: #922B21;
}

.prodbodnavlink:visited {
font-size: 11pt;
text-decoration: none;
color: #922B21;
}

.prodbodnavlink:active {
font-size: 11pt;
text-decoration: none;
color: #d1d1d1;
}

/* Links end */

.buybutton {
background-color: #922B21;
border: none;
border-radius: 10px;
color: #efe9b4;
padding: 6px 6px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 11px;
}

a img {
border: none;
max-width: 85%;
max-height: auto;
/* border-width: 0; */
/* border-style: none; */
}

.rlogo {
border: none;
padding-bottom: 5px;
padding-left: 5px;
padding-top: 8px;
max-width: 85%;
max-height: auto;
float: left;
/* border-width: 0; */
/* border-style: none;  */
}

.rlogodiv {
height: 50px;
display: flex;
float: left;
justify-content: center;
}
[/code]
HTML:
[code]


RComp | Home










[i]
[url=https://docs.google.com/forms/d/e/1FAIpQLSdAM2pywG39qjg8snRHxqkOqZK_6eQg19X3x8y07JZEkuXmpQ/viewform?usp=sf_link]Contact[/url]

RCI
[/i]


[url=/desktop]Desktop[/url]
[url=/laptop]Laptop[/url]
[url=/network]Network[/url]
[url=/sound]Sound[/url]
[url=/entertainment]Entertainment[/url]



RComp
[i][/i]


[url=/internet]Internet[/url]
[url=/office]Office[/url]
[url=/graphics]Graphics[/url]
[url=/security]Security[/url]
[url=/genealogy]Genealogy[/url]


[url=javascript:void(0);]☰[/url]




[h4]4té2. The answer to everything.[/h4]
[url=/desktop/4te2/]
[img]images/4te2/front.png[/img]
[/url]
Runs RISC OS 5. Runs Linux. Is powerful. Is affordable. Any questions?

[h4]Light in weight. Heavy on productivity.[/h4]
[url=/laptop/armbook/]
[img]images/pinebook/pbpro1.png[/img]
[/url]
Weighing in at a mere 1.04kg, the marriage of RISC OS to this ARM-powered laptop results in a highly portable solution that can be used productively for up to 14 hours.

[h4]You buy.  We deliver.[/h4]
[url=http://www.plingstore.org.uk]
[img]images/plingstore/pling-graphic.png[/img]
[/url]
From databases to DTP, and everything inbetween, !Store lets you search, purchase and download RISC OS software directly to your desktop.

[h4]Computing without limits.[/h4]
[url=/desktop/timachine]
[img]images/timachine/timachine.jpg[/img]
[/url]
For data-rich applications, TiMachine excels. A pairing of Elesar's Titanium motherboard and RComp Interactive's hardware expertise, TiMachine's 1.5GHz processor and solid state storage make short work of database and graphics tasks. And when it comes to entertainment, TiMachine is no slouch either, its raw power easily able to provide smooth gameplay on all currently available RISC OS titles.




function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}





[/code]
Я знаю, что это, вероятно, ужасающая кодовая база, но сейчас я нахожусь на этапе, когда мне просто нужно, чтобы меню работало правильно. Я могу позже рассмотреть возможность удаления ненужного CSS-кода и оптимизации. 

Подробнее здесь: [url]https://stackoverflow.com/questions/78137626/why-is-my-navigation-menu-working-at-any-page-size-on-windows-and-mac-computers[/url]