responsive template aanpassen

[rob1970]

Ik ben bezig met een responsive website op basis van een bestaande template . Deze staat nu tijdelijk op www.vetophetnet.nl

Als ik hem bekijk op mijn telefoon zijn de menupunten zichtbaar als je in bovenaan klikt op "menu"

Als ik hem echter bekijk op mijn 7 inch tablet staan de menupunten in beeld zoals op een pc. Dit ziet er niet zo geweldig uit.

Ik heb overal gekeken maar ik kom er niet achter waar ik dit eventueel aan kan passen zodat ook op mijn tablet de weergave hetzelfde is als op mijn telefoon
.

Weet iemand waar dit staat ingesteld?

Groetjes Rob

 

[googlemuscle]

Gewoon even in de CSS kijken wanneer je een mobiel menu krijgt i.p.v. het normale menu.
De resolutie waar je menu anders wordt is regel 1098. Dat stukje moet je dus bij een andere resolutie neerzetten zodat hij ook bij tablets werkt.

Kijk trouwens ook even naar je Javascript want als ik op mobiele weergave je menu open en weer sluit en vervolgens weer normaal scherm doe dan is je hele menu weg.
Zo ziet je menu er trouwens bij mij uit nu:

 

[rob1970]

Bedankt voor de reactie

Hoi, in eerste instantie bedankt dat je er naar gekeken hebt. Maar wellicht ben ik nog niet ver genoeg in mijn kunsten om dit te begrijpen.

Als ik naar de broncode kijk gaat deze maar tot regel 326. Dus waarschijnlijk bedoel je iets compleet anders.
Ik heb ook nog zoiets als "bootstrap.css", Deze gaat wel verder dan 1098 regels.
Ik heb een screenshot bijgevoegd, moet ik hier iets mee doen?

Dus ondanks het feit dat ik STIKBLIJ ben met je hulp, kom ik er met dit helaas niet uit.

groeten Rob

 

[googlemuscle]

Oke, ik zal het proberen zo simpel mogelijk uit te leggen

In je style.css moet je zijn.
Daar moet je onderstaande weghalen bij regel 1098

       span.menu {
		display: block;
		padding-bottom: .5em;
		cursor: pointer;
		font-size: 1em;
		color: #FFF;
		position: relative;
	}
	ul.nav1 {
		display: none;
	}
	.top-nav {
	    text-align: center;
		padding: 0;
		margin: .5em 0 0 0;
	}
	.top-nav ul {
	  padding: 0;
	  margin: 0 auto;
	  z-index: 9999;
	  position: absolute;
	  width: 100%;
	  left: 0;
	}
	.top-nav ul.nav1 li {
	    display: block;
		text-align: center;
		background: rgb(233, 124, 83);
		border-bottom: 1px ridge rgba(255, 255, 255, 0.28);
		margin: 0;
		width: 100%;
	}
	.top-nav ul li a {
	  padding: .3em 0;
	  display: block;
	  float: none;
	  color: #FFFFFF;
	}

Dat moet je verplaatsen naar regel 959 dus dat ziet er dan zo uit:


Mocht dit niet lukken dan zeg je het maar

 

[rob1970]

zo staat het nu

Ik heb even 2 screenshots van hoe ik het geknipt en geplakt heb.

Moet nu even met spoed iets anders doen, kan straks weer verder met de website en uploaden om te kijken of het zo goed is.
In ieder geval alvast hartstikke bedankt!!!