Horizontal nav / display widget in header

  • Author
    Posts
  • #131783

    hello!

    I’m looking to make a few changes to the spatial template and I wanted to know if they might be possible…

    // 1. Add a horizontal navigation across the top of the site listing my blog categories – basically dropping in some custom html just below the header (between the site branding and above the featured post).

    – Currently my home page is set to most recent posts. If I changed this to a static page, could I do it that way? (though I’d lose the category navigation on the post pages and assume I wouldn’t have the recent posts feed?).
    – The main goal is to get the categories visible above the fold / not hidden behind the slide-out menu. If none of the above is possible, is it possible to move the categories to where the social menu is, but change the icons to text instead? (though not sure how good this would look!)

    // 2. Add a button in the header – top right – opposite to where the search / menu nav toggles are

    – I already have placed this button in the footer using the widget function so as with the above, I guess I’d need to add in some custom html – or is this possible in css?

    Thanks so much

    The blog I need help with is blog.freddiesflowers.com.

    #131796

    lelandf
    Theme Author

    Hi there,

    1. Unfortunately it’s not possible to insert custom HTML in arbitrary locations in templates on WordPress.com. We can sort of make do with HTML in widgets, HTML in post content, and Custom CSS (I’ll provide an example of this in the answer to question #2) but it’s not an ideal solution if you’re looking for more fine-grained customization.

    – I guess you could manually code a menu in a static homepage, but yes, you would lose the recent posts feed. (Editing after my answer to #2 but…) could you insert a menu widget in your footer with all the navigation items you want in it? I don’t want to make any promises at this point but I’ll see what I can do when that is done.

    – This is an interesting idea and is technically possible but kind of an onerous workaround. This Custom CSS would get you started:

    body .social-links a:before {
    	display: none;
    }
    
    .social-links .screen-reader-text {
    	position: static !important;
    	clip: initial;
    	clip-path: initial;
    	width: auto;
    	height: auto;
    	margin: 0;
    }

    2. Hmm, this is a bit of an onerous workaround as well but this Custom CSS should get you started:

    body .site-footer {
    	position: static;
    }
    
    #media_image-3 {
    	position: absolute;
    	top: 5px;
    	right: 5px;
    	padding: 0;
    	width: 175px;
    }

    Can you let me know how this works out for you?

    Best regards,
    Leland

    • This reply was modified 3 years by  lelandf.
    #131802

    Thanks very much for your help!

    I’ve inserted the menu item in the footer under the title ‘Categories’.

    Thanks also for the CSS for question #2. I added this in and the button appears in the top right, though on mobile it overlaps the logo so have removed it for the time being.

    Ideally would want the categories to display in the slide out menu on mobile and the button not visible (sorry, this is all getting much more complicated!) – do you think that’s possible?

    Thanks!
    Emily

    #131803

    lelandf
    Theme Author

    Thanks also for the CSS for question #2. I added this in and the button appears in the top right, though on mobile it overlaps the logo so have removed it for the time being.

    Hmm, I see. Yeah, that code for #2 didn’t have any handling for mobile widths. How would you like it to work on mobile? It would be easy to put it back in its “natural” place in the footer after a certain width is reached but I’ll see what I can do if you were thinking of something else.

    Ideally would want the categories to display in the slide out menu on mobile and the button not visible (sorry, this is all getting much more complicated!) – do you think that’s possible?

    I think all of it is possible, just a little tricky to do within the limitations we have to work with on WordPress.com. I’ll spend some time on this and get back to you.

    and the button not visible

    Can you clarify what you mean by this? You mean the button would be not visible at widths wider than mobile (like “desktop” and “tablet”)?

    #131813

    Thanks Leland.

    Re #2: “How would you like it to work on mobile?” – yep in it’s “natural” place works!

    And the “button not visible” comment – meaning that the button wouldn’t be visible in the header on mobile – but moving it to the footer (in it’s natural place) works fine. On desktop / tablet we’d want the button to be visible in the top right.

    Let me know what you find!

    Thank you!

    #131842

    lelandf
    Theme Author

    In regards to #2, this should do it:

    @media (min-width: 845px) {
    	body .site-footer {
    		position: static !important;;
    	}
    
    	#media_image-3 {
    		position: absolute;
    		top: 20px;
    		right: 100px;
    		padding: 0;
    		width: 175px;
    	}
    }

    This can replace whatever you had before (I noticed you changed some of the numbers as well). The key is wrapping it in a media query to check if the width of the browser is wider than a certain amount (845 pixels) before running it.

    For the horizontal nav, this should get you started:

    @media (min-width: 845px) {
    	#nav_menu-3 {
    	  position: absolute;
    	  top: 5px;
    	  left: 40px;
    	  width: 100%;
    	}
    
    	#nav_menu-3 .widget-title {
    	  display: none;
    	}
    
    	#nav_menu-3.widget li {
    	  display: inline;
    	}
    
    	#nav_menu-3.widget {
    	  padding: 0;
    	}
    	
    	.nav-toggles {
    		display: none !important;
    	}
    }

    Same deal with the min-width media query, so it’ll revert back to its “natural” state on mobile. I also took the liberty of hiding the menu button and search box because it would have gotten in the way.

    Let me know how this works out for you!

    -Leland

    #132009

    Hey Leland,

    Thank you so much for your help! Just a few more tweaks and then I think we’re good…

    #1 – the categories nav
    – can we change the font to h3 (same as the entry-title)
    – make it centered
    – is it poss to place it below / after the site header / branding?

    #2 – button
    – this looks great – only issue is the search box is now overlapping the site branding on mobile

    Thank you again for all your help,
    Emily

    #132011

    lelandf
    Theme Author

    #1: Give this code a try?

    @media (min-width: 845px) {
    	#nav_menu-3 {
    	  font-family: "ff-market-web-1","ff-market-web-2",cursive;
    	  font-weight: 400;
    	  font-style: normal;
    	  position: absolute;
    	  top: 215px;
    	  left: 0;
    	  right: 0;
    	  width: 100%;
    	  text-align: center;
    	}
    
    	#nav_menu-3 .widget-title {
    	  display: none;
    	}
    
    	#nav_menu-3.widget li {
    	  display: inline;
        padding: 0 5px;
    	}
    
    	#nav_menu-3.widget {
    	  padding: 0;
    	}
    	
    	.nav-toggles {
    		display: none !important;
    	}
    }

    This code assumes your branding will remain in the same place and the search box is removed (I’ll get to that in the next answer). Otherwise we’ll have to shift a bunch of different things down the page.

    only issue is the search box is now overlapping the site branding on mobile

    Not to shift the blame but I think this one is mostly the fault of some of your other Custom CSS not discussed in this thread. :)

    In the original theme there is 54px of padding above the branding to give vertical space between the logo and the search box / menu button area. We can probably get away with 30px, but right now it is set to 0.

    The only other solution would be to remove the search box in the header. A search widget can still be placed in the footer widgets if you want to maintain some search functionality for your visitors.

    I’d recommend getting rid of the top search box entirely because it would keep things simple.

    Can do that with:

    body .nav-toggles .search-form { display: none; }

    Let me know how that works for you?

    Regards,
    Leland

    #132016

    Amazing – all is working a treat! Thank you so much Leland.

    Sorry if this was a little laborious – I really appreciate you bearing with me!

    I know we’ve tweaked the template a bit, but I really think it’s by far the best design out there (and I spent a lot of time reviewing them all!)

    Thanks again,
    Emily

    #132026

    lelandf
    Theme Author

    You’re very welcome! And don’t worry about any laboriousness on my end…it wasn’t too much trouble on my end and I think it turned out great!

    If you have any other questions, feel free to let me know and I’ll see what I can do.

    Regards,
    Leland

    #132105

    Hey Leland!

    Sorry – one more question…

    I’m trying to make the button in the top right bigger though not having any luck tweaking the css.

    Could you help at all?

    Thanks,
    Emily

    #132106

    lelandf
    Theme Author

    Hey Emily!

    The size of the button in the top right is constrained by the width attribute in the #media_image-3 selector of your Custom CSS.

    Right now, it’s set to width: 175px;. Just make the “175” part a bigger number and there will be a bigger button.

    Regards,
    Leland

    #132107

    Ah amazing, thanks!

    It wasn’t adjusting the sizing in the preview but when I hit publish it worked.

    Thanks very much,
    Emily

    #132108

    lelandf
    Theme Author

    No problem! If you have any other questions, let me know.

    -Leland

The topic ‘Horizontal nav / display widget in header’ is closed to new replies.