/u/426546/crop5d697a0ecfd16_cropped.png?f=community)
Beste,
Voor een vriend heb ik een website gemaakt voor zijn 'bedrijfje'. Nu zijn we redelijk tevreden met het resultaat. In zoverre het is geen zwaar professionele website maar het dient zijn doel.
Het enige wat ik maar niet goed krijg, ook niet na een hoop pielen, is de navigatiebar als ik de website bezoek via een telefoon of tablet. Ik zie dan namelijk alleen Home staan en niet alle andere links/pagina's van de website.
Zou iemand mij wat tips of trucks kunnen geven:
Ik heb e.e.a. geprobeerd aan te passen onder het kopje: <!-- Navbar on small screens --> wat ik ga er vanuit dat het hem hier ergens in zit.
Misschien als de code niet afdoende zijn voor een oordeel kan de site bezocht worden:
*snip* spam
Ik hoop dat iemand mij verder helpt. Ik heb er namelijk bewust voor gekozen de site niet in Wordpress te bouwen maar als het mij niet lukt dan ben ik alsnog genoodzaakt hem in bijv. Wordpress te gieten.
Alvast bedankt voor eventueel genomen moeite hier een blik op te werpen.
Voor een vriend heb ik een website gemaakt voor zijn 'bedrijfje'. Nu zijn we redelijk tevreden met het resultaat. In zoverre het is geen zwaar professionele website maar het dient zijn doel.
Het enige wat ik maar niet goed krijg, ook niet na een hoop pielen, is de navigatiebar als ik de website bezoek via een telefoon of tablet. Ik zie dan namelijk alleen Home staan en niet alle andere links/pagina's van de website.
Zou iemand mij wat tips of trucks kunnen geven:
Wat ik al gevonden of geprobeerd heb.<!DOCTYPE html>
<html lang="en">
<title>Bedrijf</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee, {font-size:200px}
</style>
<style>
.w3-theme-l5 {color:#000 !important; background-color:#f5f5f5 !important}
.w3-theme-l4 {color:#000 !important; background-color:#c9f0ff !important}
.w3-theme-l3 {color:#000 !important; background-color:#93e0ff !important}
.w3-theme-l2 {color:#000 !important; background-color:#5dd1ff !important}
.w3-theme-l1 {color:#fff !important; background-color:#27c2ff !important}
.w3-theme-d1 {color:#fff !important; background-color:#009bd8 !important}
.w3-theme-d2 {color:#fff !important; background-color:#0089c0 !important}
.w3-theme-d3 {color:#fff !important; background-color:#0078a8 !important}
.w3-theme-d4 {color:#fff !important; background-color:#006790 !important}
.w3-theme-d5 {color:#fff !important; background-color:#2d3194 !important}
.w3-theme-light {color:#000 !important; background-color:#effaff !important}
.w3-theme-dark {color:#fff !important; background-color:#005678 !important}
.w3-theme-action {color:#fff !important; background-color:#005678 !important}
.w3-theme {color:#fff !important; background-color:#00acf0 !important}
.w3-text-theme {color:#00acf0 !important}
.w3-border-theme {border-color:#00acf0 !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#00acf0 !important}
.w3-hover-text-theme:hover {color:#00acf0 !important}
.w3-hover-border-theme:hover {border-color:#00acf0 !important}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme-l5 w3-card w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="index.html" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
<a href="advies.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Advies</a>
<a href="trainingen.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Trainingen</a>
<a href="teambuilding.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Teambuilding</a>
<a href="inhuurvakmensen.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Inhuur vakmensen</a>
<a href="rapporterenbuurtpreventie.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Rapporteren BuurtPreventie</a>
<a href="contact.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Contact</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
<a href="index.html" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
<a href="advies.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Advies</a>
<a href="trainingen.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Trainingen</a>
<a href="teambuilding.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Teambuilding</a>
<a href="inhuurvakmensen.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Inhuur vakmensen</a>
<a href="rapporterenbuurtpreventie.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Rapporteren BuurtPreventie</a>
<a href="contact.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Contact</a>
</div>
</div>
<!-- Header -->
<header class="w3-container w3-white w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo"><IMG SRC="logo/companysmallerxl.png" BORDER=0></h1>
<p class="w3-xlarge">Eigen Veiligheid Eerst</p>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-theme w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Welkom bij Bedrijf</h1>
<h5 class="w3-padding-32">Bedrijf is een bedrijf dat zich voornamelijk richt op het geven van trainingen en advies op het gebied van integrale veiligheid. </h5>
<p class="w3-text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pretium volutpat ligula at mollis. Nunc non lectus vitae est lacinia rutrum. Quisque nec aliquet nulla. Suspendisse vel nibh est. Sed volutpat porttitor purus. Suspendisse nec sapien tempus massa facilisis facilisis. Aliquam eu justo quis nulla congue faucibus tristique nec dolor. Donec ut convallis enim. Donec in tempus orci. Ut purus justo, convallis accumsan neque ullamcorper, suscipit vehicula nibh.</p>
</div>
<div class="w3-third w3-center"> <br><br><br><br><br>
<img src="w3images/training.jpg" HSPACE="40" class="w3-round">
</div>
</div>
</div>
<!-- Second Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-third w3-center"> <br><br><br><br>
<A href="mailto:info@bedrijf.nl"><img src="w3images/emaillogo.png" class="w3-round"> </A>
</div>
<div class="w3-twothird">
<h1>Neem contact met ons op</h1> </p>
<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pretium volutpat ligula at mollis. Nunc non lectus vitae est lacinia rutrum.</h5>
<p class="w3-text-grey">
<b>Contact gegevens</b> <br>
Bedrijf<br>
t.a.v. P. Puk<br>
Straatlaan 29<br>
1234 AB Duckstad<br>
Tel: 06 - 123 45 678<br>
<a style="color: #666666;" href="mailto:info@bedrijf.nl"> info@bedrijf.nl</a> <br>
K.v.K. 12345678<br>
BTWnr. NL1234.56.789.B01<br></p>
</div>
</div>
</div>
<div class="w3-container w3-theme-d5 w3-center w3-padding-64">
<h1 class="w3-margin w3-xlarge">Bedrijf: Eigen Veiligheid Eerst</h1>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-34 w3-center w3-opacity">
<div class="w3-xlarge w3-padding-32">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
<p>Hosted by <a href="https://google.com" target="_blank">Google</a></p> <p>Design by <a href=" target="_blank">Ash</a></p>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
Ik heb e.e.a. geprobeerd aan te passen onder het kopje: <!-- Navbar on small screens --> wat ik ga er vanuit dat het hem hier ergens in zit.
Misschien als de code niet afdoende zijn voor een oordeel kan de site bezocht worden:
*snip* spam
Ik hoop dat iemand mij verder helpt. Ik heb er namelijk bewust voor gekozen de site niet in Wordpress te bouwen maar als het mij niet lukt dan ben ik alsnog genoodzaakt hem in bijv. Wordpress te gieten.
Alvast bedankt voor eventueel genomen moeite hier een blik op te werpen.
[ Voor 9% gewijzigd door RobIII op 15-01-2020 23:03 ]
:strip_icc():strip_exif()/u/26438/Beyond.jpg?f=community)
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Daarom staat er in onze 