Comments (7)
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:
- 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.
- 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.
Related Issues (20)
- Custom Navigation w/Selling Prints HOT 1
- Customizer Section for Archive(s)
- inkblot and archimedes won't show latest on my webcomic homepage
- Can't get navigation bar to appear below webcomic HOT 2
- Header image not responsive HOT 2
- Allow any kind of increment of measure in layout. HOT 2
- Comments not appearing on Webcomic Homepage Template
- Menu (Navigation) Bar - Resize HOT 2
- Menu (Navigation) Sub Menu Issue HOT 4
- Can't completely delete Viewport meta
- inkblot_page_description() not returning any data HOT 7
- Insert AdSense banner into header and disable comic date and user name. HOT 4
- Centre Webcomic Navigation Footer HOT 5
- Comic thumbnail preview (possible feature request) HOT 2
- Remove comic title from homepage and change footer HOT 1
- Primary navigation isn't centering; transition property isn't working either HOT 2
- Webcomics Archive template not working? HOT 2
- Twitter Component No Longer Able to Access to Twitter API Changes. HOT 3
- Inkblot no longer works with Customiser HOT 3
- PHP 7.4, 8+ compatibility HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inkblot.