• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Centralise logo

Mistryt

New Coder
Hi there,

I am trying to centralise my logo on WordPress using the header.php file in the Theme Editor but I'm not sure what the correct code to use is or where the code should go. I've tried a few different codes but nothing seems to happen except my search bar sometimes moves to underneath my logo.

If it helps to solve my issue better, here's the coding for my logo that I'm working with:

HTML:
<div class="branding">
                <div class="container-fluid container-fluid-limit">
                    <div class="row">
                        <div class="logo Container col-xs-12 col-sm-6 col-md-6 col-lg-7">
                            <a href="<?php echo site_url(); ?>"><img width="90" height="8" alt="" .site-logo class="header-image" src="https://www.accessoriesonline.co.uk/wp-content/uploads/2020/10/AO-logo-e1602861557337.png">
</div>
                       
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
                            <div class="row justify-content-end">
                                <div class="headerSearch col-sm-12 col-md-10 col-lg-8">
                                    <?php get_search_form(); ?>
                                </div>
                                <div class="social col-12">

Thank you in advance!
 
Last edited by a moderator:
Solution
THANK YOU SO MUCH! :D

Your codes worked great! My navigation bar got moved to the right hand side of the screen though but I sorted it out by removing some of the </div>'s.

My logo is almost central but not quite, it needs to move to just under...

simong1993

Active Coder
Community Engagement
Read above the man knows his stuff, really need to see your whole code becuse from what i can see you seem to be abit over the place. I can see your using bootstrap so first lets have alook at whats going on.

i would suggest putting your logo into your theme files so i would do something like
HTML:
 src="<?php echo esc_url( get_template_directory_uri() ); ?>/AO-logo-e1602861557337.png"
trust me you will thank me in the long run.

Now lets look at your code, from what i can see. your using bootstrap but you seem to have many class's asigned to one div. Also we seem to be missing your wordpress menu theme and quite a bit of code. Ill include my code for my menu bar and logo on my website, i use wordpress too. I wont include the CSS as its to give you an idea as bootstrap does have its own menu functions and ill also include a pure bootstrap menu bar code to show you how they work.

Bootstrap:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Mine:
    <div class="container">

      <div class="row">

          <!-- Navigation -->
          <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
            <div class="container">
              <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/justlogo.png" width="150px";></a>
              <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
              </button>
                <div class="navbar-collapse collapse" id="navbarResponsive">
                    <?php /* Primary navigation */
                        wp_nav_menu( array(
                            'menu' => 'top_menu',
                            'depth' => 3,
                            'container' => false,
                            'menu_class' => 'navbar-nav ml-auto',
                            //Process nav menu using our custom nav walker
                            'walker' => new wp_bootstrap_navwalker())
                        );
                    ?>
              </div>
            </div>
          </nav>

      </div><!-- row -->

    </div>

And if you want to read more about the bootstrap nav bars, here you go https://getbootstrap.com/docs/4.3/components/navbar/
 

Mistryt

New Coder
Hi there, Welcome to Code Forum!

Please remember to place all code within our BBCode feature, you can go here for more information.

In your css, you can perhaps try using the text-align: center; for the logo container. Or does that cause the search bar issue?
Hi there,

I have tried that code but it didn't work - depending on where I put it there were some search bar issues but otherwise the code had no effect. I apologise for not formatting my code properly, I have now edited my original post to show the BBCode feature in use.
 
Last edited:

Mistryt

New Coder
Read above the man knows his stuff, really need to see your whole code becuse from what i can see you seem to be abit over the place. I can see your using bootstrap so first lets have alook at whats going on.

i would suggest putting your logo into your theme files so i would do something like
HTML:
 src="<?php echo esc_url( get_template_directory_uri() ); ?>/AO-logo-e1602861557337.png"
trust me you will thank me in the long run.

Now lets look at your code, from what i can see. your using bootstrap but you seem to have many class's asigned to one div. Also we seem to be missing your wordpress menu theme and quite a bit of code. Ill include my code for my menu bar and logo on my website, i use wordpress too. I wont include the CSS as its to give you an idea as bootstrap does have its own menu functions and ill also include a pure bootstrap menu bar code to show you how they work.

Bootstrap:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Mine:
    <div class="container">

      <div class="row">

          <!-- Navigation -->
          <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
            <div class="container">
              <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/justlogo.png" width="150px";></a>
              <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
              </button>
                <div class="navbar-collapse collapse" id="navbarResponsive">
                    <?php /* Primary navigation */
                        wp_nav_menu( array(
                            'menu' => 'top_menu',
                            'depth' => 3,
                            'container' => false,
                            'menu_class' => 'navbar-nav ml-auto',
                            //Process nav menu using our custom nav walker
                            'walker' => new wp_bootstrap_navwalker())
                        );
                    ?>
              </div>
            </div>
          </nav>

      </div><!-- row -->

    </div>

And if you want to read more about the bootstrap nav bars, here you go https://getbootstrap.com/docs/4.3/components/navbar/
Thank you for your answer, I have a menu theme and code. I only showed you all the coding for my logo as that is the part I need help with not the navigation. If it helps my WordPress theme is UnderStrap Child.
 

simong1993

Active Coder
Community Engagement
Thank you for your answer, I have a menu theme and code. I only showed you all the coding for my logo as that is the part I need help with not the navigation. If it helps my WordPress theme is UnderStrap Child.
I need to see the whole header, the reason being is you may have a div open or a syntax not correct throwing the whole thing out, most likely tou will just need to frame the code properly, is the site live?
 

Mistryt

New Coder
I need to see the whole header, the reason being is you may have a div open or a syntax not correct throwing the whole thing out, most likely you will just need to frame the code properly, is the site live?
I understand the necessity of the whole header, if it's okay I will show you the header file privately. Yes the site is live so I'm concerned about changing too much or putting in the wrong code.
 

simong1993

Active Coder
Community Engagement
I understand the necessity of the whole header, if it's okay I will show you the header file privately. Yes the site is live so I'm concerned about changing too much or putting in the wrong code.
If you send me the URL to your site i can have a look at it live and help you from there :D Ideally, you need to show your code here so if anyone else has a simular issue it will help them too :D
 

simong1993

Active Coder
Community Engagement
OKAY LETS DO THIS

So with some new code and some slight CSS change we have got this, remove your branding container and add this there instead.

HTML:
                <div class="branding">

                    <div class="container">

                        <div class="row">

                            <div class="col-sm">

                            </div>

                            <div class="col-sm logo">

                                <a href="<?php echo site_url(); ?>">
                                    <img width="90" height="8" alt="" .site-logo class="header-image" src="https://www.accessoriesonline.co.uk/wp-content/uploads/2020/10/AO-logo-e1602861557337.png">
                                </a>

                            </div>

                            <div class="col-sm">

                                       <div class="headerSearch">
                                        <?php get_search_form(); ?>
                                    </div>

                            </div>

                        </div>

                    </div>

                </div>

Then add this to your CSS

CSS:
.header-image {
    margin: 0 50%;
}


Now you should have a perfectly centred logo :D

So what have we done, well we have used the amazing bootstrap, I've added a container, then I've added a row with 3 columns in it. I haven't told bootstrap the size of anything as they are all the same so thats why i can use col-sm. Then ive left your 1st on empty, 2nd one with the logo and 3rd with your search function. Ive then with the CSS code told your logo to have a margin of 50% on each side leaving it in the center.
 
Last edited:

Mistryt

New Coder
THANK YOU SO MUCH! :D

Your codes worked great! My navigation bar got moved to the right hand side of the screen though but I sorted it out by removing some of the </div>'s.

My logo is almost central but not quite, it needs to move to just under an inch to the right, in the center of the column basically I tried changing this:
CSS:
.header-image {
    margin: 0 50%;
}
But nothing changed then I thought I had put it in the wrong place but then again I'm not sure where it goes haha.

Here's where I put it:

CSS:
<a href="<?php echo site_url(); ?>">
                                    <img width="90" height="8" alt="" .site-logo class="header-image" src="https://www.accessoriesonline.co.uk/wp-content/uploads/2020/10/AO-logo-e1602861557337.png" .header-image {
    margin: 0 50%;
}>

Is this the right place for it to go or should it go somewhere else?
 
Solution

simong1993

Active Coder
Community Engagement
THANK YOU SO MUCH! :D

Your codes worked great! My navigation bar got moved to the right hand side of the screen though but I sorted it out by removing some of the </div>'s.

My logo is almost central but not quite, it needs to move to just under an inch to the right, in the center of the column basically I tried changing this:
CSS:
.header-image {
    margin: 0 50%;
}
But nothing changed then I thought I had put it in the wrong place but then again I'm not sure where it goes haha.

Here's where I put it:

CSS:
<a href="<?php echo site_url(); ?>">
                                    <img width="90" height="8" alt="" .site-logo class="header-image" src="https://www.accessoriesonline.co.uk/wp-content/uploads/2020/10/AO-logo-e1602861557337.png" .header-image {
    margin: 0 50%;
}>

Is this the right place for it to go or should it go somewhere else?

Man i would be late to my own funeral lol,
CSS:
.header-image {
    margin: 0 50%;
}
goes in your style,CSS file :D
 

Mistryt

New Coder
Is there a specific place in my CSS file that it needs to go? I've tried putting it after this section:
CSS:
 header .branding {
    padding: 1rem; }
    @media (max-width: 575.98px) {
      header .branding .logoContainer {
        text-align: center; } }
    @media (max-width: 767.98px) {
      header .branding .logoContainer {
        padding: .5rem 0 .8rem 0; } }
    header .branding .logoContainer img.logo {
      max-width: 220px;
      height: auto; }

But there doesn't seem to be any difference - nothing happens. :thinking:
I also tried putting it in my Additional CSS area in the customization panel but nothing happens there either. It's still just under an inch from the center.
 

simong1993

Active Coder
Community Engagement
Is there a specific place in my CSS file that it needs to go? I've tried putting it after this section:
CSS:
 header .branding {
    padding: 1rem; }
    @media (max-width: 575.98px) {
      header .branding .logoContainer {
        text-align: center; } }
    @media (max-width: 767.98px) {
      header .branding .logoContainer {
        padding: .5rem 0 .8rem 0; } }
    header .branding .logoContainer img.logo {
      max-width: 220px;
      height: auto; }

But there doesn't seem to be any difference - nothing happens. :thinking:
I also tried putting it in my Additional CSS area in the customization panel but nothing happens there either. It's still just under an inch from the center.
Send me over your CSS file, there may be something conflicting with it :)
 

Mistryt

New Coder
I'm not sure if I can send you the file - It's a very large file. Do you know where abouts the code goes in the file or can it go anywhere? Maybe if I can see an example of what my file should look like with/without the code, that might help?
 

simong1993

Active Coder
Community Engagement
Ive just retested, go into style.css and add

Code:
.header-image {
    margin: 0 50%;
}

to the very top, above .wc-block-link-button and it will work :)
 

Mistryt

New Coder
Thanks for your help! I managed to work out how to get it central without needing that margin code.

It turned out that all I had to do was put this:

<div class="center"> above the new coding you gave me on October 24 above:

<div class="branding"> in my header css file and it's worked!
 

simong1993

Active Coder
Community Engagement
Thanks for your help! I managed to work out how to get it central without needing that margin code.

It turned out that all I had to do was put this:

<div class="center"> above the new coding you gave me on October 24 above:

<div class="branding"> in my header css file and it's worked!
WOOT WOOT, im so glad you have got it working. If you ever need any more help please, please pop back so we can help. I love seeing a project through ow and don't forget to mark the answer that solved your issue *Cough*Mine*cough* :D only kidding, what ever solved your issue if you mark it as solved that way in the future people can also see if they have the same issue :D
 
Top Bottom