Logo inside Nav Menu Bar

Quote

Post by hamncheese » Mon Jan 26, 2015 1:21 pm

Hello, this is my first post here
first of all, thank you for the developer and community for creating such an amazing software, and for free to boot
im a noob in the world of building a website, so please forgive me if i ask a 'noobish' question

i have a fresh install of opencart-2.0.1.1
Image

and i need help on how to modify the page
1. how to move the Logo and Cart inside the Nav Bar & move the search bar to the Top
2. how to extend the Nav Bar all the way to side (kind of like the Top bar)
Image

3. on scroll down, how to keep the Nav Bar portion locked / static on the top of the page
Image

** for this problem i tried a solution given by Xyph3r in http://forum.opencart.com/viewtopic.php ... 6&p=397619

Code: Select all

position: fixed;
width: 980px;
z-index: 999;
and i paste the code in : catalog\view\theme\default\stylesheet

Code: Select all

#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
	position: fixed;
	width: 980px;
	z-index: 999;
}
Image
the result : the bar does stays in place, but what i really want is the bar to "replace" the Top bar
for reference, im trying to achieve similar effect from this website http://www.lennic.com/
(no relation whatsoever)

thank you for anyone willing to read and shedding some light for my problem
cheers
hamncheese
Newbie
Posts
1
Joined
Sun Apr 11, 2010 5:46 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by fido-x » Mon Jan 26, 2015 2:45 pm

In your header template file (catalog/view/theme/default/template/common/header.tpl), find (at line 41):

Code: Select all

<body class="<?php echo $class; ?>">
and replace everything below it with:

Code: Select all

<nav id="top">
  <div class="container">
    <?php echo $currency; ?>
    <?php echo $language; ?>
    <div id="top-links" class="nav pull-left">
      <ul class="list-inline">
        <li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
        <li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <?php if ($logged) { ?>
            <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
            <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
            <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
            <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
            <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
            <?php } else { ?>
            <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
            <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
            <?php } ?>
          </ul>
        </li>
        <li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
        <li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
        <li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>
      </ul>
    </div>
    <div class="col-sm-5 pull-right"><?php echo $search; ?></div>
  </div>
</nav>
<?php if ($categories) { ?>
<nav id="menu" class="navbar">
  <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
    <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <div class="col-sm-3 pull-left">
      <div id="logo">
        <?php if ($logo) { ?>
        <a href="<?php echo $base; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
        <?php } else { ?>
        <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
        <?php } ?>
      </div>
    </div>
    <ul class="nav navbar-nav">
      <?php foreach ($categories as $category) { ?>
      <?php if ($category['children']) { ?>
      <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
        <div class="dropdown-menu">
          <div class="dropdown-inner">
            <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
            <ul class="list-unstyled">
              <?php foreach ($children as $child) { ?>
              <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
              <?php } ?>
            </ul>
            <?php } ?>
          </div>
          <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
      </li>
      <?php } else { ?>
      <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
      <?php } ?>
      <?php } ?>
    </ul>
    <div class="col-sm-3 pull-right"><?php echo $cart; ?></div>
  </div>
</nav>
<?php } ?>
You will then need to "tweak" the stylesheet (catalog/view/theme/default/stylesheet/stylesheet.css).

At lines 80 to 86, you will find the following:

Code: Select all

#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
Replace:

Code: Select all

margin: 0 0 20px 0;
with:

Code: Select all

margin: 0;
At lines 125 to 127:

Code: Select all

#logo {
	margin: 0 0 10px 0;
}
Change the margin to:

Code: Select all

margin: 10px 0 10px 0;
At lines 144 to 146:

Code: Select all

#cart {
	margin-bottom: 10px;
}
Replace:

Code: Select all

margin-bottom: 10px;
with:

Code: Select all

margin: 10px 0 10px 0;
Then, at lines 198 to 204:

Code: Select all

#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
add:

Code: Select all

margin-top: 20px;

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!

User avatar
fido-x
Expert Member
Posts
2644
Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Sat Oct 03, 2015 8:06 am

Thanks Fido-x. It worked perfectly for me.
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Sat Oct 03, 2015 8:12 am

Well i spoke a little too fast. the search bar is there but it isn't working. No result is returned. Any clue?
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by viethemes » Sat Oct 03, 2015 9:23 pm

wadali_2000 wrote:Well i spoke a little too fast. the search bar is there but it isn't working. No result is returned. Any clue?
Could you provide your site URL, so we can take a look at it closer?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others

User avatar
viethemes
Active Member
Posts
1966
Joined
Thu Jan 08, 2015 12:17 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Mon Oct 05, 2015 7:23 am

Working on local server. Not sure if posting all the code could help.

Here's the code from the header in the /view/theme/default/template/common/

Code: Select all

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body class="<?php echo $class; ?>">
    <nav id="top">
      <div class="container">
       <!-- <?php echo $currency; ?>-->
        <?php echo $language; ?>
        <div id="top-links" class="nav pull-left">
          <ul class="list-inline">
            <li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-right">
                <?php if ($logged) { ?>
                <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
                <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
                <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
                <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
                <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
                <?php } else { ?>
                <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
                <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
                <?php } ?>
              </ul>
            </li>
            <li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
            <li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
            <li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>
          </ul>
        </div>
        <div class="col-sm-5 pull-right"><?php echo $search; ?></div>
      </div>
    </nav>
    <?php if ($categories) { ?>
    <nav id="menu" class="navbar">
      <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
        <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <div class="col-sm-3 pull-left">
          <div id="logo">
            <?php if ($logo) { ?>
            <a href="<?php echo $base; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } else { ?>
            <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
            <?php } ?>
          </div>
        </div>
        <ul class="nav navbar-nav">
          <?php foreach ($categories as $category) { ?>
          <?php if ($category['children']) { ?>
          <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
            <div class="dropdown-menu">
              <div class="dropdown-inner">
                <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
                <ul class="list-unstyled">
                  <?php foreach ($children as $child) { ?>
                  <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                  <?php } ?>
                </ul>
                <?php } ?>
              </div>
              <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
          </li>
          <?php } else { ?>
          <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <div class="col-sm-3 pull-right"><?php echo $cart; ?></div>
      </div>
    </nav>
    <?php } ?>
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Mon Oct 05, 2015 7:27 am

And the stylesheet in the view/theme/default/stylesheet/

Code: Select all

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	background : url('/image/montana_fields_sky_bw.jpg') fixed no-repeat center;
	color: #666;
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #23a1d1;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, 
											input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, 
											input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, 
											input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, 
											input[type="tel"].form-control, input[type="color"].form-control
{
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #currency .currency-select {
	text-align: left;
}
#top #currency .currency-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 10px 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 25px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 3px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px 0 10px 0;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
}
	@media (max-width: 478px) {
		#cart .dropdown-menu {
			width: 100%;
		}
	}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
	@media (max-width: 478px) {
		#cart .dropdown-menu li > div {
			min-width: 100%;
		}
	}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #000000, #333333);
	background-repeat: repeat-x;
	border-color: #000000 #000000 #333333;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	margin-top: 20px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* content */
#content {
	min-height: 600px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }
    #column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }
    #column-left + #content + #column-right .product-layout .col-md-3{
       width: 100%;
    }
    #content + #column-right .product-layout .col-md-3{
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout,
#column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}
And the search.tpl in the view/theme/default/template/common/

Code: Select all

<div id="search" class="input-group">
  <input type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" 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>
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Mon Oct 05, 2015 7:47 am

Also i only get this in my URL when i do a search in the search bar in the navigation menu

http://localhost/index.php?route=product/search

But if i do a search on that URL above, i get this URL below and the results comes in perfectly.

http://localhost/index.php?route=produc ... rch=agatha
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by viethemes » Mon Oct 05, 2015 9:39 pm

You can try following this solution: open file catalog/view/javascript/common.js,
find all

Code: Select all

header input[name=\'search\']
and replace with

Code: Select all

input[name=\'search\']

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others

User avatar
viethemes
Active Member
Posts
1966
Joined
Thu Jan 08, 2015 12:17 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wadali_2000 » Tue Oct 06, 2015 7:34 am

A millions thanks.
wadali_2000
Newbie
Posts
13
Joined
Wed Sep 30, 2015 8:29 pm
Top

Re: Logo inside Nav Menu Bar

Quote

Post by wilek666 » Wed Mar 02, 2016 6:35 am

Dear all, how did you manage 3 point ?
While scroll down, how to keep the Nav Bar locked (static on the top of the page) ?

http://www.ortopediko.pl
http://www.pszczelafarma.pl

User avatar
wilek666
New member
Posts
29
Joined
Sun Dec 07, 2014 2:26 am
Location - Warsaw, Poland
Top

Re: Logo inside Nav Menu Bar

Quote

Post by nightwing » Sun Jan 05, 2020 10:51 am

This is an old question but I will share a link for anyone that needs help in 2020. Please read the below post if you are just looking for a quick way to make your navbar sticky:

viewtopic.php?f=202&t=203250

In summary, this worked for me in OCv 3.0.3.2 Default Theme.

Add:

Code: Select all

$(function(){
var div = '#menu';
var windowScrollTop = $(window).scrollTop();
var divOffsetTop = $(div).offset().top;
if(windowScrollTop > divOffsetTop){
	$(div).addClass('sticky');
} else {
	$(div).removeClass('sticky');
}

$(window).on('scroll', function(){
	var windowScrollTop = $(window).scrollTop();
	if(windowScrollTop > divOffsetTop){
		$(div).addClass('sticky');
	} else {
		$(div).removeClass('sticky');
	}
});
});
To the bottom of this file:

Code: Select all

catalog/view/javascript/common.js
Then add:

Code: Select all

/* Sticky Nav */
#menu.sticky {
	position: fixed;
	text-align: center;
	top: 0;
	z-index: 999999;
	box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.27);
}
To (You can also create your own custom CSS file so it does not get overwritten when updating:

Code: Select all

*/catalog/view/theme/default/stylesheet/stylesheet.css
Credits to @DigitCart (memberlist.php?mode=viewprofile&u=180854) and @mona (memberlist.php?mode=viewprofile&u=414295) as they were the one to assist me with a similar issue.

wilek666 wrote: ↑
Wed Mar 02, 2016 6:35 am
 Dear all, how did you manage 3 point ?
While scroll down, how to keep the Nav Bar locked (static on the top of the page) ?

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing

nightwing
Active Member
Posts
321
Joined
Tue Nov 05, 2019 11:08 pm
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 289 guests