Header HTML / CSS is shoving everything way right off the page!

theslimbrady

The issue

I'm making a header to match my Wordpress / Elementor site and doing it from scratch but I'm admittedly a bit new to HTML / CSS. As far as I'm aware based on the description, all of the header content is supposed to appear ABOVE the default one. Instead it's forcing the whole contents of the forum way right and off the page. My URL is https://applebrides.com/forum/ if you want to check it out. I'll include my HTML and CSS code as well below. Probably a simple fix but I'm struggling here haha

HTML:

<div id="logo"><img src="https://applebrides.com/wp-content/uploads/2022/02/Apple-Brides-Logo1-Wordmark_1c.png" alt="Apple Brides Logo" width="150" height="94"></div>

  <ul class="nav">
    <li><a href="https://applebrides.com/">Home</a></li>
    <li><a href="https://applebrides.com/find-your-vendors/">Find Your Vendors</a></li>
    <li><a href="https://applebrides.com/inspiration/">Inspiration</a></li>
    <li><a href="https://applebrides.com/planning-tips/">Planning Tips</a></li>
    <li><a href="https://applebrides.com/deals/">Deals</a></li>
    <li><a href="https://applebrides.com/travel/">Travel</a></li>
    <li><a href="https://applebrides.com/magazine/">Magazine</a></li>
    <li><a href="https://applebrides.com/submissions/">Submissions</a></li>
    <li><a href="https://applebrides.com/join-advertise/">Join & Advertise</a></li>
  </ul>

CSS

body {
    overflow-x: hidden;
}

ul.nav {
    list-style:none;
    height:25px;
    width:100vw;
    font-family: 'Montserrat';font-size: 16px;
}

ul.nav li {
    margin-top: 30px;
    margin-left:25px;
    float:left;
}
ul.nav a {
    padding:10px 20px;
    color:#000000;
    text-decoration:none;
    text-transform:uppercase;
}

ul.nav a:hover,
ul.nav li.current a {
    background:#d2c4b4;
}

#logo{
  margin-left:75px;
}

#logo img{
  height: auto;
  width: auto;
  max-width: 7%;
  overflow: hidden;
  float:left;
}

Flarum information

Flarum core 1.4.1
PHP version: 7.4.30
MySQL version: 5.7.39-42-log
Loaded extensions: Core, date, libxml, openssl, pcre, sqlite3, zlib, bcmath, bz2, calendar, ctype, curl, dba, dom, enchant, hash, fileinfo, filter, ftp, gd, gettext, gmp, SPL, iconv, session, intl, json, mbstring, standard, mysqlnd, pcntl, mysqli, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, imap, shmop, SimpleXML, soap, sockets, sodium, exif, sysvmsg, sysvsem, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, memcached, Zend OPcache
+-------------------------------+---------+--------+
| Flarum Extensions             |         |        |
+-------------------------------+---------+--------+
| ID                            | Version | Commit |
+-------------------------------+---------+--------+
| fof-oauth                     | 1.2.2   |        |
| fof-upload                    | 1.2.3   |        |
| fof-secure-https              | 1.1.0   |        |
| fof-recaptcha                 | 1.1.0   |        |
| fof-pwned-passwords           | 1.0.2   |        |
| fof-nightmode                 | 1.4.1   |        |
| fof-formatting                | 1.0.2   |        |
| flarum-tags                   | v1.4.0  |        |
| flarum-suspend                | v1.4.0  |        |
| flarum-subscriptions          | v1.4.0  |        |
| flarum-sticky                 | v1.4.0  |        |
| flarum-statistics             | v1.4.1  |        |
| flarum-nicknames              | v1.4.0  |        |
| flarum-mentions               | v1.4.0  |        |
| flarum-markdown               | v1.4.0  |        |
| flarum-lock                   | v1.4.0  |        |
| flarum-likes                  | v1.4.0  |        |
| flarum-lang-english           | v1.4.0  |        |
| flarum-flags                  | v1.4.0  |        |
| flarum-emoji                  | v1.4.0  |        |
| flarum-bbcode                 | v1.4.0  |        |
| clarkwinkelmann-circle-groups | 1.0.1   |        |
+-------------------------------+---------+--------+
Base URL: https://applebrides.com/forum
Installation path: /home/customer/www/applebrides.com/public_html/forum
Queue driver: sync
Mail driver: smtp
Debug mode: off
baseos | u1394-oob95jiiwmdy@us243.siteground.us:~/www/applebrides.com/public_html/forum$

luceos

I'll come back to this once I figured out what breaks the layout in your post 🙈 😂

luceos

We have deployed to Flarum some changes in preparation of v1.5, which has caused this issue and will be resolved soon 😉

Now onto the question at hand.

theslimbrady I would start simpler:

Install fof/links and add the menu links in the top, configure the logo and then start styling that instead of overriding the Flarum default navigation. Otherwise you are losing every kind of responsiveness and extensibility. Looking at what you have so far it shouldn't really pose much of an issue, you can use the Appearance tab in the admin to inject custom css to style the navigation and links.

theslimbrady

luceos Alright so I'm trying that now. It appears that with all the links it's taking up more space and is now forcing the forum search and admin controls down in an awkward spot. I'm trying to make it look as close to the original site (www.applebrides.com) as possible. I'll need to fix the first issue as well as changing the font to 'Montserrat'.

luceos

theslimbrady first add all the links, then start playing with custom css to get it all back into one line. If the original site has such a bulky navigation you will probably need to find a better way to render the navigation or remove some links that are less used..

theslimbrady

luceos Links are already added live on site. Found this thread from two years ago discussing it but never really being resolved FriendsOfFlarum/links20. Like I said I'm also fairly new to CSS and have no clue how to go about customizing the already existing default header. If it were full width I think it would fit fine. Currently on my screen the full width of the header only takes up ₆₅-70% of my screen.

luceos

I personally think you're trying to force a bulky header onto a page that doesn't really need it. Obviously if you really want it, it's possible. In fact we - as Blomstra - recently implemented something similar not too long ago. But an oversized menu like Apple Brides, would still look awkward if you want to keep the Flarum elements too. My suggestion would be to drop all the navigation links, just resize the header to resemble the one from the website, copy that style and add a "to website" link or similar.

PS the reason the navigation breaks is because it's too cramped, there's simply not enough space to show everything in there.

theslimbrady

luceos Alright I'll just downsize it then I suppose. Would there be a simple code to add to change the header font to Montserrat to match the original site? Also I'm still running into the issue where the links just straight up don't work. When I hover them they appear to lead to the right place but clicking does nothing.

EDIT: Turning the "Internal Links" feature fixed it. Still want to change font though.

luceos

theslimbrady Still want to change font though.

You can add the google fonts link to the head using this extension: https://extiverse.com/extension/ianm/html-head
Then apply the font to the relating elements with Appearance - Custom Styles.

Ps, in hindsight, about the navigation, have you tried injecting the whole site navigation in Appearance - Custom Header? This should render the site navigation above Flarum's own, not sure how appealing that is though 😉

theslimbrady

luceos That's how I originally tried to do it. Unfortunately Elementor doesn't make it super easy to convert your site to HTML so I just tried to do it by hand. Got close but ultimately it isn't that big of a deal. That custom HTML and CSS before got it pretty close but I think it was doing the same thing the fof/links was doing where it ran out of space and was shoving everything right instead of just the search bar and friends. I figured there was some sort of css I could add or change that would prevent it from going past the width of the page.