[protostar template] Having logo and main menu on same line.

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 12:04 pm

I suspect (hope?) this is relatively simple, but as the subject says, currently the logo (a small image) is above the main menu bar, which is a waste of space. I'm using protostar (to be precise, a copy of it) for the site's theme (at least as present, if I can find a free theme more suited for my client's site then I'll switch).

So, the question is: how do I have the menu on the right, and the site logo directly to its left?

Zemplate · Post by **Zemplate** » Tue Feb 09, 2016 12:18 pm

You can put the menu into position-0. You need to assign two classes to the menu module in the Advanced tab in the Module Class Suffix area. navigation and nav-pills.

Leave a space in front and between each class name, otherwise Joomla appends it to the default class name for that position.

These classes will then use the classes in template.css for the proper behavior for the menu.

There may be some other tweaks or additional styles that you want to add to a custom stylesheet.

I would make a suggestion here. Before you get too far with your customization of the template, make a copy of the Protostar template using the proper steps in Template Manager. Set the new name as the default template. This way if you upgrade you Joomla installation, you won't lose your customization.

This is done by clicking on the protostar name in the Template column in Template Manager, not the Style column.

You will go to a screen with a Copy Template button up top. Give the new template a name that make sense for you and click Copy Template. Go back to the first screen under Template Manager and set that new template as a default. These steps make a proper copy of all the files and folders and adds the info to the database. It is best to do this in the beginning if you can.

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 12:24 pm

Already using a copy of protostar, as I'd said. Though I'm running into an issue with the theme not honouring image scaling properly, grr, though that's a different issue.

Thanks for the info on menu positions, shall get that done ASAP.

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 12:31 pm

So, menu and logo are on the same line.

But the menu is on the other side of the screen to the logo. I want to position the menu immediately to the right of the logo.

Would target position help here?

Zemplate · Post by **Zemplate** » Tue Feb 09, 2016 12:47 pm

Do you have a public url for the site. It may be just a matter of tweaking the float for that position.

Do you use Firebug or another diagnostic tool? You could see what styles are currently pushing the menu to the right and override that style.

On the images, are you adding a width and height to the image when you place it in the text editor? Inline styles, such as this, will mess up responsiveness of the images.

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 12:49 pm

Images are a separate issue, so I've made another thread for that.

Nothing public for now as I'm developing the site in a VM.

Firebug reports the element that has the menu as "<div class="header-search pull-right">".

Zemplate · Post by **Zemplate** » Tue Feb 09, 2016 1:16 pm

So look at the exact styles for that in Firebug and create new styles either in a custom stylesheet or at the end of template.css. For custom stylesheets, you need to link to them from index.php for the template. If at the end of template.css, this is so you can keep your new styles all in one place. If you edit the original styles, you may have a difficult time finding the edited styles again and template.css will be overwritten if you upgrade your template.

Likely there is a float applied. If float: right, you can create an overriding style of float none or float:left.

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 1:38 pm

Located it in index.php. Not sure if it's actually the correct place or not, but at least it worked.

James More · Post by **James More** » Tue Feb 09, 2016 1:43 pm

Are you sure you changed in index.php? Because I am unable to find the write place to modify my header?

Sslaxx · Post by **Sslaxx** » Tue Feb 09, 2016 1:53 pm

I found it at index.php on line 145.

Zemplate · Post by **Zemplate** » Tue Feb 09, 2016 2:00 pm

To link a custom stylesheet, you open up the index.php that resides in the folder for your template.

You can use Joomla to link to it or add it as a regular stylesheet link in the html <head> section.

See below for an example of using Joomla's script to link to the stylesheet. Be sure that it come after the link to the template.css. this is around line 42 for a Protostar template.

Code: Select all

// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');

deanivk · Post by **deanivk** » Fri Apr 21, 2017 11:42 am

Zemplate wrote:You can put the menu into position-0. You need to assign two classes to the menu module in the Advanced tab in the Module Class Suffix area. navigation and nav-pills.

This is a very bad solution.
I had this problem, so I came to this site and sow it and thought omg cool, i tried this out wow so simple and works immediatelly. But first issue: the button for mobile menu disappeared. And other problems, because i put float right for the navigation.
But, there is another, much bigger problem that makes such kind of solution unusable.
As I sow to the sourcecode: Original: .navigation rolle="navigation".
With solution, menu in position 0: .navigation rolle="search", and this is fully unacceptable.
Optically, you see a manu, every browser will show the menu, but for search engines your website does not have a menu and this is very bad for SEO.
I found solution and I want share it with you: This is so simple and very important a clear solution:
Don't need to put menu onto position 0, dont need to add some additional classes.
Just go to index.php file and delete the clas "clearfix" for element div and logo or your text will automatically fall down before menu! The class "clearfix" prevents this. For other purpuses it is usefull but in this case its on false place. This is on line 147 <div class="header-inner clearfix"> clearfix is too much.
This is right: <div class="header-inner">. Less work and proper html roll attributes.

deanivk · Post by **deanivk** » Fri Apr 21, 2017 11:50 am

To the custom style sheet you must write it directly into index.php file is partially correct.
When you make an new style sheet let say user.css over templates in joomla (not upload over ftp), you must make it correctly: Make a new style sheet, save and CLOSE the file on the button. Than wait a few seconds and than look on your site. Youll see it works. Look into sourcecode youll see your new style sheet. Notice: save file and CLOSE file.
If you dont close file, joomla will not take over into index.php.

hoanta · Post by **hoanta** » Sat Apr 29, 2017 5:01 pm

Thank you @deanivk for your simple but great solution.

deanivk · Post by **deanivk** » Wed May 10, 2017 12:29 pm

@hoanta: Im glad it helped to you

I got many good ideas and solutions here.

ynill · Post by **ynill** » Tue Aug 21, 2018 2:18 pm

Another thank you to @deanivk for your great idea. Really liked the idea of using the original html css float structure for a elegant and simple solution. I did add the clearfix class to line 161, like so: <nav class="navigation clearfix"> so that the module that I have following stays below nav etc.

The Joomla! Forum™

[protostar template] Having logo and main menu on same line.

[protostar template] Having logo and main menu on same line.

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same l

Re: [protostar template] Having logo and main menu on same line.

Re: [protostar template] Having logo and main menu on same line.

Re: [protostar template] Having logo and main menu on same line.

Re: [protostar template] Having logo and main menu on same line.