-
Hi there! I was able to figure out how to add a button using elements (Block-hook) in the top nav, but I want to disable the page title that shows up the top nav too. When I choose “show no nav” in layout > primary nav customization, it ends up hiding the button as well. Are there any work-arounds to this?
-
Hi there,
but I want to disable the page title that shows up the top nav too
Do you mean the blue Khan Academy Blog next to the button? Is it a menu item?
Can I see it on your site?
-
Yes, I’d like the blue “Khan Academy Blog” test to be disabled on the primary nav and only show the “Donate” button. I currently only have one secondary navigation setup for “categories” as the left sidebar in the customization settings. “Khan Academy Blog” is a page I setup as the ‘front page’ on the pages tab. I’m hosting this on a local server so unfortunately don’t have a link 🙁 adding a screenshot to see if that helps
Screenshot: https://postimg.cc/87x83df4A couple of additional things I’d like to try figuring out with the primary navs/secondary nav:
1. Is there a way to add padding to the top of the Secondary nav (left sidebar) so that it lines up with the top of the main content area?
Screenshot: https://postimg.cc/87x83df42. On mobile view, the collapsed “Menu” for the Secondary nav goes to the bottom of the content, is it possible to have it to appear at the top before the main content area instead of the bottom?
Screenshot: https://postimg.cc/sQRkfVcZ3. Hoping that disabling the page title on the primary nav will fix this, but I don’t want the hamburger to show up on mobile. When I go to Primary nav and change the mobile breakpoint to 0, the logo ends up getting centered as well. I’d like the logo to remain left aligned, and donate button right aligned.
Screenshot 1: https://postimg.cc/18n2pg7q Screenshot 2: https://postimg.cc/TKzSQRBH -
OK, let’s deal with 1 question at a time.
“Khan Academy Blog” is a page I setup as the ‘front page’ on the pages tab. I’
Is this the only page you currently have so it appears as the default menu item of your primary navigation?
Can you add the button via hook
after_header_content? -
Yes, it is the only page I have right now.
I changed the Hook name from
menu_bar_itemstoafter_header_content. On desktop it appears nothing’s changed, but on mobile it bumped the button down and is now centered.Desktop: https://postimg.cc/vcW3MWKX Mobile: https://postimg.cc/18BBVysq
-
Try adding this CSS:
@media(max-width: 768px) { .inside-header { flex-direction: row; } } -
Added to CSS, here’s what mobile looks like!
-
I thought you were going to remove the navigation. are you?
-
Ah I thought removing it would remove the button too. Just removed it on primary nav and it worked! The button floats to the left now though after removing navigation.
Desktop: https://postimg.cc/HjbNPFbP Mobile: https://postimg.cc/9DQN0MKv
-
Edit the button in your element and set its
margin-lefttoauto. -
That worked!! 🎉
-
Now let’s deal with the rest issues.
For #1, can you go to customize > Layout > Sidebars, and adjust the top padding?
-
I adjusted the widget padding from 40 to 60, but that didn’t change anything it seems
At 40: https://postimg.cc/ZCXnwBZS At 60: https://postimg.cc/MnG5mLW4 -
I see, try using this css:
.inside-left-sidebar { padding-top: 50px; } -
That did the trick!
-
For #2, will you be adding more content to the left sidebar, as I can not only pull the secondary nav up, it has to be the entire sidebar.
Let me know 🙂
- You must be logged in to reply to this topic.