Can someone help me please with allign / move site name in header?
Here is what I need to fix - to have site name alligned with a search field.
https://www.headsety.cz/header.png
Thanks a lot!
This is your header
That is basically your catalog/view/theme/YOUR-THEME/ template/common/header.twig
Broken down so you can see it
This adds up to 12 col (ie 4+5+3 = 12 columns)
Your logo is placed in col-sm-4 (width 4 columns)
Your search in col-sm-5 (width 5 columns)
your cart in col-sm-3 (width 3 columns)
Move your logo
to inside the col-sm-5 which will become
Code: Select all
<div class="row">
<div class="col-sm-4">
<div id="logo">
<h1><a href="https://www.headsety.cz/">Řešení pro přenos hlasu a obrazu</a></h1>
</div>
</div>
<div class="col-sm-5"><div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Vyhledat" class="form-control input-lg">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div> </div>
<div class="col-sm-3"><div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" data-loading-text="Načítám..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 položek - Kč 0,-</span></button>
<ul class="dropdown-menu pull-right">
<li>
<p class="text-center">Váš nákupní košík je prázdný!</p>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>Broken down so you can see it
Code: Select all
<div class="col-sm-4"></div>
<div class="col-sm-5"></div>
<div class="col-sm-3"></div>
This adds up to 12 col (ie 4+5+3 = 12 columns)
Your logo is placed in col-sm-4 (width 4 columns)
Your search in col-sm-5 (width 5 columns)
your cart in col-sm-3 (width 3 columns)
Move your logo
Code: Select all
<div id="logo">
<h1><a href="https://www.headsety.cz/">Řešení pro přenos hlasu a obrazu</a></h1>
</div>Code: Select all
<div class="col-sm-5">
<h1><a href="https://www.headsety.cz/">Řešení pro přenos hlasu a obrazu</a></h1>
<br/>
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Vyhledat" class="form-control input-lg">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
That is the way to do it.
If there were some simple css that would make it work without messing everything up I would have said.
Yes I could do it with css if I had to, but from someone who LOVES css - I would not do it with css.
No, you do not touch bootstrap.css and whatever you found online is wrong and will change other things on your site.
Open up the file as per above.
Read the above.
Look at the code in the file.
Understand the instructions and how they relate to the code.
move the logo out of col-sm-4 and put the code exactly as it is into col-sm-5 with a line break <br/> between the two to make it on two lines.
Very simple job, very simple learning curve.
If there were some simple css that would make it work without messing everything up I would have said.
Yes I could do it with css if I had to, but from someone who LOVES css - I would not do it with css.
No, you do not touch bootstrap.css and whatever you found online is wrong and will change other things on your site.
Open up the file as per above.
Read the above.
Look at the code in the file.
Understand the instructions and how they relate to the code.
move the logo out of col-sm-4 and put the code exactly as it is into col-sm-5 with a line break <br/> between the two to make it on two lines.
Very simple job, very simple learning curve.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Who is online
Users browsing this forum: No registered users and 6 guests
