Hello Simon (I couldn’t tag Simon. Can you tag him in the comments?)
Thank you very much for the Fizzy theme, it’s beautiful.
menu and views are distorted and their dimensions are out of shape. How can I fix this?
I don’t see an error in the image you posted. I’m also not sure what Simon’s handle is here, but here’s contact info from the Github repo - that’s probably the right place to start. huangyuzhang (Simon) · GitHub
1 Like
Thank you for the answer. The image I attached is very different from fizzy’s demo. This is the problem :)
I have the same problem. From which file do we edit the menus?
I want to correct the dimensions of the upper parts too. Does anyone know which file?
1 Like
The top navigation is probably from partials/navigation.hbs. You’d create your specific menu items by going to /ghost > Settings (gear icon) > navigation.
Hang on – looks like some of the links are hard-coded in partials/header.hbs. Check there, too.
Thanks for updating the image to show the problem. I wonder if this theme has two header layout options? It has some logic in partials/header.hbs.
I’m looking into it, but we’re not sure, which one should we change?
header.hbs.
<header>
<nav id="navbar" class="navbar is-white is-spaced has-shadow-thin is-montserrat is-fixed-top" style="z-index:999;" role="navigation" aria-label="main navigation">
<div class="nav-container column is-paddingless is-12-tablet is-10-desktop is-10-widescreen is-8-fullhd">
<div class="navbar-brand">
<!-- if wide logo is uploaded -->
<div class="navbar-item text-logo">
<a class="align-vcentered" href="https://fizzy.cc" alt="Fizzy" title="Fizzy - Exploring exciting things.">
<!-- if icon is uploaded -->
<img src="/media/images/custom-icon.png">
<!-- Site Name & Colored Dot -->
Fizzy<span>.</span>
</a>
</div>
<!-- burger in mobile devices -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarPrimary">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarPrimary" class="navbar-menu">
<!-- Site Navigation -->
<div class="navbar-start">
<!--% for (let i=0; i < menus.length; i++) { %-->
<!--% let menu = menus[i]; %-->
<!-- navigation -->
<a class="navbar-item nav-current" href="https://fizzy.cc/">
Home
</a>
<a class="navbar-item " href="https://fizzy.cc/archives">
Archives
</a>
<a class="navbar-item " href="https://fizzy.cc/tags">
Topics
</a>
<a class="navbar-item " href="https://fizzy.cc/about">
About
</a>
<div class="navbar-item" id="search-btn">
<i class="iconfont icon-search"></i>
</div>
<div class="fizzy-search">
<div class="field has-addons" style="display:none" id="search-container">
<form class="control has-icons-left" id="search-form" action="https://fizzy.cc/search/">
<input id="search-input" class="input" placeholder="Search" name="q">
<span class="icon is-left">
<i class="iconfont icon-search"></i>
</span>
</form>
<div class="control" id="close-btn">
<button type="submit" class="button" style="padding-left:calc(0.75em - 1px);padding-right:calc(0.75em - 1px);"><i class="iconfont icon-cross"></i></button>
</div>
</div>
<!-- <div id="search-results"></div> -->
</div>
</div>
<!--%= link %-->
</div>
</div>
<div class="navbar-brand">
{{#if @site.logo}}
<div class="navbar-item logo">
<a href="{{@site.url}}">
<img src="{{@site.logo}}" alt="{{@site.title}}" title="{{@site.title}} - {{@site.description}}" width="auto" height="28">
</a>
</div>
{{else}}
<div class="navbar-item text-logo">
<a class="align-vcentered" href="{{@site.url}}" alt="{{@site.title}}" title="{{@site.title}} - {{@site.description}}">
{{#if @site.icon}}
<img src="{{@site.icon}}">
{{/if}}
{{@site.title}}<span>.</span>
</a>
</div>
{{/if}}
{{!-- burger in mobile devices --}}
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarPrimary">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarPrimary" class="navbar-menu">
{{!-- Site Navigation --}}
<div class="navbar-start">
{{#if @site.navigation}}
{{navigation}}
{{/if}}
</div>
{{!-- Credit Button start --}}
<div class="navbar-end">
<div id="fizzy-credit" class="navbar-item has-dropdown is-hoverable is-hidden-mobile btn-fizzy is-hidden">
<div class="btn-fizzy-inner">
<a target="_blank" class="btn-fizzy-text" rel="noopener">Get Fizzy Theme</a>
</div>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="https://fizzy.cc/Fizzy-Theme/" target="_blank">
Homepage
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/" target="_blank">
GitHub Repo
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/projects/3" target="_blank">
Roadmap <span class="badge green"> New</span>
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/blob/master/CHANGELOG.md" target="_blank">
Changelog
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/issues" target="_blank">
Report an issue
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/" target="_blank">
<img src="https://img.shields.io/github/stars/huangyuzhang/Fizzy-Theme.svg?style=social&label=Star" alt="GitHub Stars">
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/releases/latest/" target="_blank">
<img src="https://img.shields.io/github/release/huangyuzhang/Fizzy-Theme.svg?label=Release&color=green" alt="Download Fizzy Theme">
</a>
<a class="navbar-item" href="https://github.com/huangyuzhang/Fizzy-Theme/tags/" target="_blank">
<img src="https://img.shields.io/github/tag/huangyuzhang/Fizzy-Theme.svg?label=dev-tag&color=orange" alt="Download Fizzy Theme">
</a>
</div>
</div>
</div>
{{!-- Credit Button end --}}
</div>
</div>
</nav>
</header>
It looks like Simon fixed the Fizzy problems described here.
He also updated Fizzy for Ghost Version 5.