[Solved] Image Navigation Menu Positioning

[hikaru12]

Hi guys,

I’m using the Skeleton framework and I’ve run into a bit of a snag. I visited one of my friends blog the other day and I noticed he had an interesting navigation menu: http://eev.ee/blog/. Making the gradient squares and dumping a bunch of icons in them wasn’t hard. The main issue right now I’m running into is positioning the navigation squares (the menu) to the right. I’ve tried floating it and absolute positioning it but that messes up the responsiveness of the framework.

Does anyone know of a way to accomplish this?

Also see my mockup for an example:

[Paulie_D]

Can’t tell without seeing your code (in a Codepen demo?) but a simple float:right on the menu should be sufficient.

In the example case, the menu is 100% wide but it has text-align:right for the inlined list items.

[hikaru12]

I figured it out. I’m using text-align and aligning the list elements to the right. My main issue now is getting the links to display as squares because as soon as I use display: inline; it squishes everything together as demonstrated below (notice how the square is more rectangular when using display:inline;)

I’m using the following code:

.squarehome {
background: -webkit-linear-gradient(top, #fac695 0%,#f5ab66 47%,#ef8d31 100%);
width: 10vw;
height: 10vw;
}

By keeping the height and width the same, I was hoping to keep the “navigation squares” in my navigation responsive.

[Author]

Posts