Pinned nav bar on mobile formatting help

Help
1

Hello,

I recently set-up my blog, and have used the Natsu theme as a template to configure the design. The problem I’m running into is that when viewed on an iPhone 1x Pro Max, the pinned navigation bar and the site logo are displayed awkwardly.

image

Is there a way to tidy this up in CSS (which I’m absolutely not much good at). Any help greatly appreciated.

The CSS code I’m using/adapted is as follows:

/* Written in 2020 by Natsu

   To the extent possible under law, the author(s) have dedicated all 
   copyright and related and neighboring rights to this software to the 
   public domain worldwide. This software is distributed without any 
   warranty.

   You should have received a copy of the CC0 Public Domain Dedication 
   along with this software. If not, see 
   http://creativecommons.org/publicdomain/zero/1.0 */

#wrapper, #collection article, #post article, #subpage article {
    max-width: 800px !important;
}

.pinned {
white-space: nowrap;
}

body#collection header nav, body#post header nav, body#subpage header nav {
overflow-wrap: break-word;
}
   
html {
    border-top: 8px solid #9dc7ef;
}

body {
    color: #181818;
    background-color: white;
}

p.description.p-note {
  margin-top: 1em;
  font-size: 1.7rem;
  line-height: 0.20em;
}

/* All text is the same size. Otherwise text in the main page looks too tiny to me*/ 

#collection article p, #post article p, #subpage article p {
    font-size: 1.2rem;
} 

#collection article li, #post article li, #subpage article p {
    font-size: 1.2rem;
} 
#collection article ol, #post article ol, #subpage article p {
    font-size: 1.2rem;
}

header nav {
    margin: 0 1em 0 0;
    line-height: 0.5em;
}

footer hr {
	display: none;
}

body footer nav {
	margin: 3em 0 1em 0;
}

a.pinned {
  font-weight: bold;
}

footer nav::before {
    content: "Copyright © 2024 by Martyn Drake. Most rights reserved. \A";
    white-space: pre-wrap;
}

#blog-title {
    color: #422615;
    white-space: nowrap;
}

#blog-title a {
    background-image: url(https://i.snap.as/nopVPEZy.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
    display: inline-block;
    width: 150px;
    height: 150px;
    background-size: 150px;
}

#post #blog-title a, #subpage #blog-title a {
    /* Change size of logo on post and tags pages */
    width: 48px;
    height: 48px;
    background-size: 50px;
}

article h2 {
	margin: -5px 0px 0px 0px;
	padding: 5px 0px 20px 0px;
	line-height: 1.8em;
	text-align: left;
	font-weight: bold;
	width: 110%;
	background: url(https://i.snap.as/q3nZJM31.gif) no-repeat;
}

article h2 a:hover {
	text-decoration: none;
}

article .book.e-content::first-letter {
    color: #383838;
    display: inline-block;
    float: left;
    font-size: 2.5em;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    margin: 2px 5px 0 0;
}

/* Links inside blog posts */

article a {
    color: #3C7C30;
    text-decoration: none;
}

article a:hover {
	color: #ff6600;
    text-decoration: underline;
}

article .p-name {
    position: relative;
}

p img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    border-radius: 8px;
}

#subpage #wrapper h1::before {  content: '#';}

.hashtag {
    font-size: 1.0rem;
    text-align: center;
}

a.hashtag {
	color: #3366ff;
}

a.hashtag:hover {
	color: white;
	background: #3366ff;
	text-decoration: none;
}

.read-more::before {  content: '» ';}

.custom-nav {
    text-align: center;
}

.custom-nav a:link, .custom-nav a:visited, .custom-nav a:hover, .custom-nav a:active {
    color: #108275;
    text-decoration: underline;
}

.custom-nav a:hover, .custom-nav a:active {
    text-decoration: none;
}
2

Welcome, Martyn.

I’d be happy to help. But the CSS you shared doesn’t seem to match what I’m seeing in your screenshot, based on my knowledge of the HTML used for the header nav. If you link to your blog I’ll peek at your code and recommend a solution.

3

You’re welcome to look at my Write.as site, which I have heavily modified:

It’s not overly complicated, but I did move the nav around a lot in how it’s positioned. For small screens (mobile) I use a progressive-enhancement approach for showing/hiding the nav. It has simple CSS structure for the base setup. Then I use javascript to build out the show/hide version for when javascript is enabled.

This works great for me because it’s accessibility first and deals with the awkward navigation setup in the Write.as template. But, as mentioned, it’s a little more complicated for folks who aren’t comfortable with CSS/javascript.

2 Likes
4

Mark, your site keeps getting better. Love the formatting on the recent rendition.

1 Like
5

That’s really kind of you to say. Thank you so much!

When I launched, it was with the most basic styles to convert the default template into one that matched my brand. Once I found Write.as, I wanted to get off Medium as quickly as possible. So I’ve been working hard to turn it into something truly custom. It’s a little challenging because there aren’t a ton of hooks I can grab with the CSS, but I’m figuring it out.

Anyway, your kind words mean a lot.

6

Thanks, Mark. I agree with Justinf, yours is an incredible site and demonstrates precisely what can be achieved if you have the skills with CSS and Javascript.

I’ve decided to move away from write.as as a platform since while it covers 99% of my needs, my lack of CSS knowledge is holding me back from creating the site I want. Too many little things that all add up.

1 Like
7

Thanks, friend. I hope you find the right solution. Be well.