Logo text and logo, how do i get both?

[henrikmarstal]

Is it possible to have a logo jpeg and logo text stacked in the header?
Im trying to build a one page website, but it seems that i only can choose one or the other. (see the embedded image)

Here is the link to the site:
http://marstalifolketinget.dk/one-page-navigation/

Thanks ::Jakob::

[basanta]

Hi There,

Unfortunately, that feature is not available in the theme.
You need custom CSS to make it a similar look.
I will try to help you with this.

1. Please enable the top header bar.
   Go to Dashboard -> X -> Theme Option -> Header and in MISCELLANEOUS section please enable top bar and put your logo image over there.

Please check this screenshot for help.

2. Add this CSS code to Theme Option -> CSS

.x-topbar .x-social-global {
display: none;
}
.x-topbar .p-info {
width: 100%
float: none;
text-align: center;
}
.x-topbar {
border: none;
background: #fff;
}

and remove your logo from the header setting.

You may need small changes in the CSS to make it look exactly.

Hope this helps!

[henrikmarstal]

Cool, thanks for the help, can you also help me with aligning the logo image.
i tryet with this html in Dashboard -> X -> Theme Option -> Header MISCELLANEOUS section - but it doesnt seems to do the trick???
< img src=“http://marstalifolketinget.dk/wp-content/uploads/2018/11/hm-construction-1.jpg” alt=“Henrik” class=“center” >

Thanks.

[basanta]

Hi There,

I tested the code and the CSS in my setup and it works fine.
I can see the image you have for the logo having the issue it not loading in the site.
I have tried different image and its working fine.

We really can’t help you any more on this as this is something related to a custom CSS, I only help you on finding a way to do this.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.