Keeping nav buttons under the comic page. about inkblot HOT 7 CLOSED

Thanks @Victorre! Can you share a link to your site? If I can see what you're seeing I might be able to tell what's going on. The latest Inkblot update – which just hit the theme directory today – might also help, as it has some nav-related fixes.

from inkblot.

Sure, thanks for your time. Here's a link: http://ivanhoeandrobinhood.com .

Just to reiterate and clarify: When I resize the browser window my nav buttons space out to fit the full area below the main menu. Instead I'd like to keep them in the area above and below the comic pages, so they don't spread out too much on a large monitor.

I don't see a theme update in my admin screen. Is the newest version 4.2?

from inkblot.

Thanks @Victorre. The newest version is 4.3, actually, but now that I see what you're talking about the update won't fix that (though you'll probably want to update anyway for other fixes). There are two things you could do get the nav links where you want them:

1. Set a Maximum Width for your site in the Customizer. This is the easiest – and possibly best – solution, as it'll prevent your entire site from getting too wide and keep the nav links where you want them.
2. Alternatively, you can set a width on the container for those links like:

.post-webcomic nav {
    margin: auto; /* this centers the container */
    width: 756px;
}

from inkblot.

Ok, great. Solution number 2 is exactly the look I was going for. However, there's still a problem.

Setting a width caused the menus to de-center, and no longer shrink when scaled down, so I tried setting a max-width inside the .post-webcomic nav instead. That worked perfectly, but strangely only for the lower nav bar, not the upper one. I tried deleting the rest of my child theme to see if that was interfering, but it didn't fix it. Is there some way around this?

from inkblot.

(I forgot to mention that the problem with the upper nav bar is that though it now has the right max width it has for also aligned right.)

from inkblot.

Inkblot's default styles have a more specific rule that's causing the .post-webcomic nav rule to be ignored (for margin, at least). Try:

.post-webcomic nav.above,
.post-webcomic nav.below {
    margin: auto;
    width: 756px;
}

I've added an issue to remind me to go back and make sure the default styles aren't too specific.

from inkblot.

Excellent, thanks! I changed it from width to max-width to allow to resize smaller as well, but otherwise it worked like a charm. My child theme nav code now looks like this:

.post-webcomic nav a {
float: none;
width: auto;
}

.post-webcomic nav {
background-color: black;
text-align: center;
}

.post-webcomic nav.above,
.post-webcomic nav.below {
margin: auto;
max-width: 756px;
}

from inkblot.