Post by frishops » Thu Sep 15, 2016 1:56 am

Hello,

Does anyone knows the Custom CSS to extend the menu bar to full browser width?

I know to centre-align the menu links, CSS is:

@media (min-width: 768px) {
#menu .nav {
float: none;
text-align: center;
}

#menu .nav li {
display: inline-block;
float: none;
}
}

Image

Your Local Store.
http://www.frishops.ca
http://www.frishops.cn


New member

Posts

Joined
Tue Sep 15, 2015 5:58 am
Location - Quebec, Canada

Post by IP_CAM » Thu Sep 15, 2016 4:05 am

checked already, how others are doing this ?
---
Full width homepage by GrandCMS.com
http://www.opencart.com/index.php?route ... e=GrandCMS
---
or check here for more:
http://www.opencart.com/index.php?route ... ll%20width
---
Ernie ;)

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by frishops » Thu Sep 15, 2016 9:57 pm

Hey thanks for the links.

I've tried many, but most of them is full width only. What I want is full-browser width, the same as the top bar.

Vince

Image

Your Local Store.
http://www.frishops.ca
http://www.frishops.cn


New member

Posts

Joined
Tue Sep 15, 2015 5:58 am
Location - Quebec, Canada

Post by cyclops12 » Fri Sep 16, 2016 12:47 am

The easiest way i can see is to edit your header.tpl file
Find

Code: Select all

<?php if ($categories) { ?>
<div class="container">
and change "container" to "container_cats" or whatever you want to , then just add some styling to it.

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by frishops » Mon Sep 19, 2016 9:19 pm

cyclops12 wrote:The easiest way i can see is to edit your header.tpl file
Find

Code: Select all

<?php if ($categories) { ?>
<div class="container">
and change "container" to "container_cats" or whatever you want to , then just add some styling to it.
Hey Thanks a lot.

What is the code for full-browser width?

Image

Your Local Store.
http://www.frishops.ca
http://www.frishops.cn


New member

Posts

Joined
Tue Sep 15, 2015 5:58 am
Location - Quebec, Canada

Post by cyclops12 » Tue Sep 20, 2016 2:00 am

I just tested this on 2.0.3.1 and works ok

In catalog/view/theme/YOUR-THEME/template/common/header.tpl and find around lines 91-93

Code: Select all

<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
Then i changed <div class="container"> to <div class="container-cats">
so now looks like this

Code: Select all

<?php if ($categories) { ?>
<div class="container-cats">
  <nav id="menu" class="navbar">
Then in catalog/view/theme/YOUR-THEME/stylesheet/stylesheet.css i made a space under the body css code and added

Code: Select all

.container-cats {
	width:100%;
}
You can obviously change the name to whatever you like

You may have to add some media css styling as well

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by mikesch70 » Thu Sep 22, 2016 12:53 am

Code: Select all

<?php if ($categories) { ?>
<div class="container-fluid">
Use Bootstrap!
http://v4-alpha.getbootstrap.com/layout ... containers

Newbie

Posts

Joined
Wed Nov 23, 2011 1:48 am

Post by cyclops12 » Thu Sep 22, 2016 2:29 am

mikesch70 wrote:

Code: Select all

<?php if ($categories) { ?>
<div class="container-fluid">
Use Bootstrap!
http://v4-alpha.getbootstrap.com/layout ... containers
Ah i didnt think of that but you would still have to go into the correct bootstrap.css file and remove the left and right padding to get it FULL width

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by frishops » Wed Oct 19, 2016 8:20 pm

Hey,

Thanks guys for the help. I really appreciate it.

Image

Your Local Store.
http://www.frishops.ca
http://www.frishops.cn


New member

Posts

Joined
Tue Sep 15, 2015 5:58 am
Location - Quebec, Canada
Who is online

Users browsing this forum: No registered users and 68 guests