I'm currently in the process of creating a website and I've decided to prioritize making it "mobile first". To achieve this, I've opted to utilize Foundation by Zurb as I find it more user-friendly.
Here is the code snippet that I am using:
/* General */
/* Header */
@media only screen and (min-width: 40.063em) {
.logo-wrapper {
position: relative;
}
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -2px;
margin-top: 60px;
margin-left: -46px;
}
.top-bar{
height: 150px;
}
// Right part
.top-bar-section ul.right {
width: 50%;
padding-left: 60px;
}
.top-bar-section ul.right li {
float: left;
}
// Left part
.top-bar-section ul.left {
width: 50%;
padding-right: 60px;
}
.top-bar-section ul.left li {
float: right;
}
.top-bar li{
margin-top: 60px;
margin-left: 25px;
margin-right: 25px;
}
}<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a class="logo show-for-small-only" href="#"><img src="http://placehold.it/50x50" /></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="http://placehold.it/350x150">
</div>
</div>
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li> <a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</section>
</nav>
</div><!-- /navigation -->My issue lies in the fact that while this code works well on desktop and mobile devices, it fails to render correctly on medium-sized screens such as tablets.
Unfortunately, I am unable to provide images for reference, but I'm hopeful that someone can offer assistance in resolving this problem.