This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Center Header Text and Remove Menu?

  • Creator
    Topic
  • #25160
    thekieran
    Member

    Hello,

    Is it possible to center the header text and remove the menu? Even though I haven’t set up a menu the menu hamburger shows up on mobile and on my desktop whenever my browser window is narrow.

    Thank you!

    • This topic was modified 5 years, 9 months ago by thekieran.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #25162
    Jason Bobich
    Keymaster

    Hi,

    I’m sure you can accomplish what you’re looking to do with some basic CSS customization. Can I please see a link to your site, so I can see exactly the way it’s currently setup?

    #25169
    thekieran
    Member

    Hi Justin,

    Apologies for not including that earlier. My temporary site is currently hosted here:

    http://www.jojoproductions.com/kt/test/

    Thank you!

    #25175
    Jason Bobich
    Keymaster

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

    I guess centering the logo can be a little tricky, if you’re unsure how about CSS positioning and the transform property. There are several ways to do it, but this is one way.

    .site-header.full-width > .wrap .header-logo {
    	text-align: center;
    }
    @media (min-width: 992px) { /* Only desktop viewport */
    	.site-header.full-width > .wrap .header-logo {
    		left: 50%;
    		-ms-transform: translate(-50%,-50%);
    		-webkit-transform: translate(-50%,-50%);
    		transform: translate(-50%,-50%);
    	}
    }
    .tb-sticky-menu .header-logo {
    	float: none;
    	text-align: center;
    }

    And just force the menu toggle button to not show by hiding it.

    .denali-mobile-menu-trigger {
    	display: none;
    }
    • This reply was modified 5 years, 9 months ago by Jason Bobich. Reason: Added missing period (.) at start of code block
    #25211
    thekieran
    Member

    I appreciate the help Jason! I was out of town and just got back to my computer. I used the code you provided and I was able to hide the menu button just fine.

    My header centers now, but only when I have a wider browser. If I shrink the browser width on my desktop the header justifies to the left. It is left justified on mobile as well. Any ideas?

    #25214
    Jason Bobich
    Keymaster

    In the code block above, there should be a period . the very start of it. I’ve fixed it above.

    .site-header.full-width > .wrap .header-logo {
    #25215
    thekieran
    Member

    That did the trick! Thank you for your help Jason.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.