Advise on CSS in Tiny Theme

Developers
1

I’m trying to modify the Tiny Theme to get hierarchical menus and I’m partly successful. I looked up some code on the internet and have some kind of hierarchical menu but unfortunately it doesn’t look the way I want. The main problem is that I haven’t used CSS in a long time and is probably 10 generations behind everyone else.

Anyway, the site is at https://jemostrommain.micro.blog/ and I’m trying to do two things:

  • getting more space between the menus and page content
  • center the navigation bar, hmm I should probably center the whole header

I’m using this CSS snippet

#menu {
	padding-bottom:100px;
    display: block;
    background-color: blue;
    text-align: center;
}

The blue background is only for me to see where the menu is … and yes, I don’t want to have a 100px spacing there, I just want to see what happens. I’m probably doing something really, really wrong but I lack the CSS knowledge to understand what is wrong.

Does anyone have any advise on how I can fix this?

Here is the CSS for the hierarchical menu part

/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 3px;
margin-left: 3px;
}
/*Style for menu links*/
li a {
    display:block;
    /* height: 50px; */
    margin: 0 10px;
    text-align: left;
    line-height: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
    background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
2

Something like this?

CleanShot 2024-02-26 at 23.36.11@2x
CleanShot 2024-02-26 at 23.36.11@2x1920×1294 147 KB

Sometimes you gotta style the container, and not the element. So, what I did was:

header {
  margin-bottom: 2em;
  display: grid;
  text-align: center;
  justify-content: center;
}
#menu {
  position: relative;
  border-radius: 5px;
}

So instead of trying to tell the menu to be centered, I told the header to have it’s content centered - if that makes sense. :slightly_smiling_face:

I’m no CSS expert myself, but I’ve been styling the Tiny theme myself these past weeks, so can try to help more if needed!

I don’t have nested menus, though - but you can take a look at my site here.

Edit:

Oops, I forgot about the margins!
You can increase the margin-bottom: 2em on the header to get more space.

But if you like it how it looks now, you could do something like this:

CleanShot 2024-02-26 at 23.46.08@2x
CleanShot 2024-02-26 at 23.46.08@2x1920×1294 159 KB

I’m a sucker for transparency and blur. :sweat_smile:

How that works, is that you give an element a background colour with some transparency, and then you add a filter to make it blur stuff that’s visible behind it.

Background: transparent; makes it completely transparent, but you can also use regular hex colours and just add two digits at the end.

So #ffffff is completely white, while #ffffff88 is white, but with some transparency.

I made myself this little cheat sheet:

Hex ➔ Percentage:

  • 11 ≈ 7 %

  • 22 ≈ 13 %

  • 33 = 20 %

  • 44 ≈ 27 %

  • 55 ≈ 33 %

  • 66 = 40 %

  • 77 ≈ 47 %

  • 88 ≈ 53 %

  • 99 = 60 %

  • aa ≈ 67 %

  • bb ≈ 73 %

  • cc = 80 %

  • dd ≈ 87 %

  • ee ≈ 93 %

  • ff = 100 %

So #ffffff88 is completely white, with around 53 % opacity.

Don’t use css Opacity: 0.5; for this blur effect. And try to avoid to have several elements within each other have blur - like both giving it to the ul and the lis.

Here’s what I did in the screenshot:

I removed the styling of the list items, and only styled the ul.hidden:

background: #ffffff88
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius-bottom-left: 5px;
border-radius-bottom-right: 5px;
3

Huge thanks, this was exactly what I wanted (at the moment :smile:).

I really need to get up to speed on the CSS stuff.

4

I was just thinking this morning I have too many buttons in the menu bar (also TinyTheme), and this seems like an interesting solution… If I do something similar, I will make sure to explain it in my CSS (I currently have a post on the changes I’ve made). Thanks for posting this!