How to move and position custom logo in WordPress website | 2021
How to move and position custom logo in WordPress website | 2021
How to move and position custom logo in WordPress website | 2021 | with Subtitles is a WordPress website tutorial for total beginners.
In this video tutorial, learn how to move and position your custom logo in a WordPress theme header with a tiny CSS code.
How to add a custom logo in WordPress?
How to change logo size in WordPress?
How to resize logo in WordPress?
How to move custom logo in WordPress?
How to position custom logo in WordPress?
How to use padding in WordPress theme?
How to add CSS code in WordPress?
Please give this video a “Like” to support my efforts. Thank you!
Content
2 -> hey everyone welcome to my channel and in
today's wordpress video i'm going to talk about
8.88 -> how to move your custom logo on your page right
so in my previous video i had talked about
18.16 -> how to place your custom logo and how to
resize it uh by using a small css code
25.36 -> and in today's video we will we will see how we
can move it to the right or left how to position
32.16 -> your logo on your web page but before that i
have to mention something because some of you
37.76 -> guys find these solutions useful and some others
don't and i will also explain the reason why
47.84 -> some of you guys are not actually able to
work these out on your own wordpress themes
55.52 -> right okay so before long do let me explain how
to get this particular method done so we have
65.44 -> two websites here this is where i will demonstrate
our solution and this other one is for comparison
74 -> reasons now how do i move my custom logo
around i navigate to first of all i open up my
84.16 -> wordpress admin console and then i will navigate
to appearance and not themes but customize
93.2 -> right this is where i will customize my theme
and how it looks like so here is my custom logo
100.96 -> this is a very simplistic theme and actually
it's it's a free one that's called 2020
109.76 -> right so this actually comes with the
wordpress installation right it's very basic
117.36 -> it just gets the job done you will probably be
working with some other theme but this is where
123.68 -> i will demonstrate and there's a reason to it okay
and i'll explain that further down in the video
130.56 -> right so what did we do in our last
video we placed this uh custom logo
138.24 -> and with some additional css code we resized
this and made it larger or smaller right
151.2 -> before we continue please take a
couple of seconds to give a thumbs
154.4 -> up to this video and it will help a lot to
support my channel thank you very much now
160.72 -> where is our small code from the previous video
it's here right so we used this one to manipulate
172 -> the size of our custom logo all right now you can
see that we used the the logos metadata the name
183.2 -> the object name and then we changed
the attribute that's called max hates
190.16 -> right now we can add actually some other
attributes to this such as position
200.8 -> and we can say absolute see
what it does it actually
210.48 -> detaches your logo from the spanner
you see now it's become independent
219.52 -> now it's inside now it's independent see now
226.32 -> um as you can see with this attribute we can make
it much larger much much larger or much smaller
236.8 -> so let's say that 150 is our size now the
attribute to actually move this logo to the right
247.76 -> would be padding and then it would be
padding left and this would be let's say 100
266.88 -> so the attribute to move your
logo further to the right would be
276.96 -> padding left and say 200 pixels why left because
i'm leaving space this much space from the left
292.4 -> okay so because actually it it's um it's leaning
to the left right uh the the logo is placed on the
301.44 -> left side of my page that i will leave this
much space before my logo starts that this
311.36 -> is what it means padding means that i'm leaving
this much space before my object can start okay
320.24 -> so you can actually change this or make it
even smaller and this tells you how to move
331.12 -> the logo to further to the right all right now
do not use padding top because this is something
342 -> completely different this will actually change
the size of your logo okay so see my logo is gone
354.24 -> 50 you see now this is this actually has
a completely different effect without this
361.36 -> my logo is the size that i have set this and
now this is diminishing this is decreasing the
371.12 -> size of my custom logo all right so i would say
just avoid this because you're actually setting
379.52 -> the size of your custom logo with this
attribute and then with padding left you're
384.88 -> moving this further to the right and again
with position absolute you're detaching this
394.96 -> from the header so visually speaking that's what
it does okay and without this your logo would
402.08 -> move uh would expand the header so that it fits
inside but without this your header lives its own
412 -> life without taking into account the size
of your custom logo now why this code works
424.16 -> in some themes and it doesn't work with others
the reason is not every wordpress theme allows
432.56 -> you to manipulate logos right so i will show you
i'll show you how now this is another website
442.8 -> this is my main website which is admin tutorial
dot com and i'm using another theme here which is
451.2 -> pressbook dark and let's go and try to customize
this using the same code now obviously this is
461.44 -> a completely different theme and it doesn't
necessarily allow me to change or modify the same
470.4 -> aspects the same attributes of my website okay
so if i go to the same location say i navigate to
478.96 -> additional css see i have no css code at this
moment applied to my theme but i will do so i'll
486.56 -> copy this over and then paste it here right so
please observe some things worked and some others
502.48 -> didn't what worked for example position absolute
worked and you can observe that padding worked
517.44 -> but the size did not work see 400 600 it's doing
nothing okay so this is very important for you
529.84 -> to note because not every theme is going to allow
you to change every attribute so that this is why
539.2 -> it's absolutely important when you're first
choosing the theme to apply to your website
548 -> you have to make sure that it allows the things
that you want to modify on your website okay
554.64 -> so if this attribute is absolutely vital to you
and and you really want to go with a free theme
562.88 -> you don't want to use this one because this
is not allowing you to change the size of your
568.64 -> custom logo whereas this one absolutely does
i can just say 450 and this attribute works
579.12 -> so see there there's nothing wrong with the
code it's just the theme either it allows you to
585.92 -> manipulate this attribute or it doesn't right okay
so this is the reason why um this type of css code
594.72 -> will work for some of you guys and it's not going
to have any effect at all for others and this
600.8 -> is because of the theme that you're using so how
can you get past that actually so what you can do
606.72 -> is when you're when you're selecting a theme
you can make sure that it allows you to um
613.76 -> to manipulate custom logos say for example
appearance themes and you want to add new
622.32 -> right so you have a feature filter here what
you can do is you can narrow down the choices
631.44 -> by selecting custom logo also maybe custom
header custom colors so this all depends
639.52 -> on what attribute you want to change and
modify in the standard free theme that comes
647.68 -> uh with this installation right so make sure
that you have the custom logo and otherwise i
654.24 -> mean it's not going to uh some some of the themes
they won't even let you add your own logo right
661.2 -> well i hope this video has been useful so
again what we have done is we have covered
671.36 -> the css code that we use to move our logo
around on the page to the right or to the
679.52 -> left so that's something that we
achieve with the padding command
683.68 -> and we've also talked about the position again a
reminder so this is detaching and attaching our
690.72 -> logo to the header and then we talked about why um
sometimes this these manipulations works and they
700.24 -> work in some themes and they don't work in others
um right so guys i'll appreciate if you can give
707.04 -> a thumbs up a like to this video to support this
channel and see you in the next video thank you
716.48 -> thank you so much for watching if you can just
take a couple of seconds to give a thumbs up a
721.44 -> like to this video i'll appreciate it will
help a lot and see you in the next video
748.8 -> you
Source: https://www.youtube.com/watch?v=2vL88INj8Ek