Joomla Templates Club 406,261 posts

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#186180

How do you switch the top menu and top login in this template?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#487785

Can you be a bit more specific with your question and/or what it is you want to accomplish?

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#487826

Please see attachment. Would like to switch these two menus. I tried just setting the left one to the top-login position but the menu ended up stacking vertically and not formatted correctly.

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#487831

Okay, so what you can do is modify the “float” property for that top navigation . . . .

Within the LESS CSS file —> /templates.ja_mitius.less.bootstrap-responsive.less.css

at/about line 70, change the “float: left” property to “float: right”


{
float: right;
margin-left: 30px;
min-height: 1px;
}

You will likely need to fiddle around with the other margin values to better situate things, but that should point you in the right direction to start.

NOTE:
For info on the whole “bootstrap/less” system —> http://twitter.github.com/bootstrap/index.html

Also, it helps to utilize FIREBUG your trial-and-error in modifying CSS, until you’re satisfied with the changes and are then ready to commit them to your active site files.

Hope that helps

😎

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#487934

Thanks but that moved everything from the menu and logo to and other left aligned positions center of page. We just want to switch the top menu and top login.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#487937

<em>@angie00 366366 wrote:</em><blockquote>Thanks but that moved everything from the menu and logo to and other left aligned positions center of page. We just want to switch the top menu and top login.</blockquote>

As I said . . . you will likely need to fiddle around with the other margin values to better situate things,
but that should point you in the right direction to start.

😎

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#488347

ok, thanks anyway. :(( Wish there was a better way just to switch the two. This bootstrap and less stuff is more confusing to customize than the other framework. I’m still trying to figure it out. I appreciate its speed but without understanding it, it’s making the website development process much slower.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#488447

Hi angie00,

Here is my guide on your interest:
– Configure switched position.
Open <blockquote>templatesja_mitiustplsblockstop-header.php.</blockquote> Then replace lines:

<div class="span8<?php $this->_c('top-menu')?>">
<div class="top-menu">
<jdoc:include type="modules" name="<?php $this->_p('top-menu') ?>" style="raw" />
</div>
</div>
<div class="span4<?php $this->_c('top-login')?>">
<div class="top-login">
<jdoc:include type="modules" name="<?php $this->_p('top-login') ?>" style="raw" />
</div>
</div>

with

<div class="span4<?php $this->_c('top-login')?>">
<div class="top-login">
<jdoc:include type="modules" name="<?php $this->_p('top-login') ?>" style="raw" />
</div>
</div>

<div class="span8<?php $this->_c('top-menu')?>">
<div class="top-menu">
<jdoc:include type="modules" name="<?php $this->_p('top-menu') ?>" style="raw" />
</div>
</div>

– Style switched position with css:
Open <blockquote>templatesja_mitiuscsscustom.css</blockquote>. Then pastes below code at the end of file:

.top-login {
float: left;
}
.top-menu {
float: right;
}


>> You can see my attached snapshot of result on my hosting.

Regards,
—
Leo

---

Attachments:

1. 

[Author]

Posts