Hello

Sorry to day there is no option with our Vitality template to achieve this. You could try replacing the social icons with a module position which would involve replacing the following in your templates index.php...

<?php require("php/layouts/social_icons.php"); ?>

With...

<div id="newmodule">

	<jdoc:include type="modules" name="newmodule" />

</div>

You'll find the position won't be listed in the positions dropdown within your modules parameters so simply type it in to create (newmodule).

Ciarán

Hi,

I have done as proposed. However the menu has moved downward according to the size of the logo.

Even if the logo size is height 10px (which is not clear at all), the menu will move to the header container.

Please advise how to maintain the menu to be above the header container as usual.

Hello

Would you have a URL to an example of your issue?

Ciarán

Hi,

Please see http://www.synergistic-intelligence.com.

You can see that the menu drops inside the header container.

Thank you

To amend try adding the following to the Custom CSS field of your templates parameters...

.hornavmenu {

    position: absolute;

    top: 0;

}

Ciarán

Great. Thank you.

Please advise how to make the font smaller for the "logo" text as per
http://www.synergistic-intelligence.com/index.php/consultancy/business-model-strategy

Hi Yu

To amend try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

h1.logo-text a {

    font-size: 40px;

}

For the benefit of other forum users please post further new queries to a new post.

Ciarán

For display on the mobile phone, kindly advise the following:

1. How to let the logo (now is at the top right hand corner of the menu bar) appear on the mobile phone display?
2. if I have make the logo-text to be 40px, how to make it appear small on the mobile phone display?

Hello

It appears your logo is been hidden behind the mobile menu. To reposition your logo on smaller screen devices try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 1024px) {

#container_hornav {

    margin-top: 65px;

}}

Ciarán

Hi,

After adding the proposed CSS, I still can't see the logo on mobile device - there is no other appearance besides the word "MENU" which is at the top right-hand corner.

The logo appears shortly at first and disappears.

FYI, the website is https://synergistic-intelligence.com

Hello

Try the following instead which moves the logo to the left of the screen...

@media only screen and (max-width: 1024px) {

#logomenu {

    left: 0;

    position: absolute;

    z-index: 101;

}}

Note: We are unable to see the previously suggested CSS in your source.

Ciarán