Centering links in menu |
Centering links in menu |
Legless |
Feb 2 2018, 05:19 AM
Post
#1
|
Newbie Group: Members Posts: 16 Joined: 6-January 17 Member No.: 26,256 |
Hi guys,
I'm trying to implement some code I found on w3schools for a responsive menu. This is the code: https://www.w3schools.com/howto/howto_js_to..._responsive.asp It appears to work well, but the problem I'm having, is that I can't get the links to be centered across the page. I've tried removing the float: left / adding divs inside divs with percentages / margin: 0 auto, etc. etc., but I'm getting nowhere. I wonder if someone could help me sort out this problem? They have a sort of jsfidddle type page here: https://www.w3schools.com/howto/tryit.asp?f...ryhow_js_topnav Many thanks. |
Legless |
Feb 2 2018, 10:32 AM
Post
#2
|
Newbie Group: Members Posts: 16 Joined: 6-January 17 Member No.: 26,256 |
I think I'm a step closer now.
I created an inner div with text-align:center; ...removed the float-left on .topnav a and set .topnav a to inline-block The only problem now, is the first link is not left aligned, when viewed on a mobile - it is centered. Any ideas how I could left align the first link? CODE <style type="text/css"> .topnav { overflow: hidden; background-color: #d1270b; margin: 10px 0; } .topnav a { display: inline-block; color: #FFFFFF!important; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #d1270b; color: #ffffff!important; text-decoration: underline; } .active { background-color: #d1270b; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> CODE <div class="topnav" id="myTopnav"> <div style="text-align: center;"> <a href="/">Home</a> <a href="/articles">Articles</a> <a href="/downloads">Downloads</a> <a href="/forum" class="active">Forum</a> <a href="/dir/products/updated">Products</a> <a href="/dir/services">Services</a> <a href="/contact">Contact</a> <a href="java script:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> |
Legless |
Feb 7 2018, 05:42 AM
Post
#3
|
Newbie Group: Members Posts: 16 Joined: 6-January 17 Member No.: 26,256 |
This was the fix...
CODE @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a { float:left; } .topnav a.icon { float: right; display: block; } } |
Lo-Fi Version | Time is now: 5th May 2024 - 09:50 PM |