How to center logo and menu

Hello diversunderground,
Hope you are having good time!

Can i have your site url please?

Cheers! ??

Hello,

https://www.diversunderground.com

Thanks!

Hello diversunderground,
Welcome Back!

Please paste the following code at the end of your style.css file and save it.
.main-navigation{margin-top:55px;}

I hope it will bring all the stuff of header in center.

Best Regards
Vipin

Hello diversunderground,

I am not sure if Vipin’s response resolved your issue, let me know if you still need help with this one

Hello Pacethemes

I am using the Quest theme and looking to centre a logo in the header bar horizontally rather than vertically as explained above, then have the menu bar below the logo. Can you help?

Also is it possible to remove the blog post and reply facility from the site?

My site is a dve site https://dev.barneysbiscuitboxes.co.uk/

Thanks
Barney

Hi Barney

Have you checked Quest Plus ? It provides different header variants on a per page basis, one of the header variants is exactly what you are trying to achieve.

Even though we want to promote Quest Plus, we don’t want to limit you on what you can achieve with just the Quest Theme, hence i will provide you the code required to achieve what you need. Add the below css in style.css in the child theme folder

.site-branding, .main-navigation{
	width: 100%  !important;
	float: none !important;
	text-align: center  !important;
}

h1.logo{
	text-align: center  !important;
}

.navbar-nav{
	float: none  !important;
}

.navbar-nav > li {
	float:none  !important;
	display: inline-block !important;
}

Pacethemes,

Thanks for the info. I am having trouble creating the child theme folder for the Quest theme. It works fine for theme Tewnty Fourteen, but when I change the template name to ‘Quest’ or ‘quest’ my Appearance page says that I have to load the parent theme, event when that theme is the active theme!

Should I try deleting the quest theme and reinstalling it?

Thanks

Barney

This should be in style.css in child theme folder

/*
 Theme Name:   Quest Child
 Theme URI:    https://example.com/twenty-fifteen-child/
 Description:  Quest Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     quest
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  quest-child
*/

This should be in child theme functions.php

<?php
add_action( 'wp_enqueue_scripts', 'quest_child_enqueue_styles' );
function quest_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Also, please rate the theme if you like it ??

Have a great day !

Thanks for the help! I’ve already rated the theme after your quick response wrt the last update ??

I’m just joining the thread as this is of interest to me, but it’s nothing critical.

I did try the method above but unfortunately it doesn’t really work properly. I think the aim is to get the menu and title to centre just as it appears when the browser width is reduced. However when the above is followed there are some unintended consequences; primarily when a menu is opened, it shifts the whole page contents down to make space for the menu (instead of overlaying). Also, clicking on the parent of a menu drop down only opens that menu, instead of loading the parent page.

https://www.diversunderground.com is a good example of this

Would it be possible to just constrain the menu width?

Thanks!

Hi

Thank you for the rating ??

My bad, i have missed some styles, i didn’t even realize that there was an issue, remove all the CSS i provided earlier and replace it with below

.site-branding {
        float: none ;
        width: 100%;
        text-align: center;
    }
    #site-navigation {
        float: none;
        width: 100%;
        border-top: 1px solid @borderColor;
        .nav {
            float: none;
            text-align: center;
            display: inline-block;
        }
    }

Wow thanks for such a quick response!

I feel a little guilty haha… not quite there :/ But almost!

Oddly, the menu aligns left instead on centre. And also somehow this has shifted the text on my image slider. The “Content Position – Vertical” is set to “top”, but now appears about the centre, and when set to centre appears at the bottom, and when set to bottom disappears.

I can live with it ??

Hi

Can you provide me your site URL where i can see this issue ?

Hi,
Thanks for having a look ??

Still very much a work in progress, but i’ve taken the site out of maintenance mode so you can have a look:

https://emrcollege.com

The “we train the brave” on the frontage image is set to “top”

Thanks!

I believe the issue is because the styles are not loading in the correct order and i am to be blamed for that :), will be fixing this up in the next release by defining style dependencies, for now can you change how you are enqueuing the parent style in the child theme. Change it to below. I’ve also rechecked the CSS i provided earlier and it should work for the Center Logo and Menu, once you make the below change

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css',
    	array(
        	'quest-bootstrap',
        	'smartmenus',
        	'font-awesome',
        	'animate-css',
        	'slit-slider',
        	'colorbox'
    	)
     );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );
}