Change text size in NavBar in 3.0.2.0
Posted: Sun Jan 13, 2019 1:53 am
I'm trying to add a blog to my navbar which I can do but when I do this text appears over two lines and it looks bad. So I was going to make the text smaller or move it all down so it appears over one line. I've been trying for over three hours and cant figure it out.
The website is TheWatchLink.co.uk and I want ad the blog at the end of the bit that says "Home, Accessories, Straps & Clasps, Watch Boxes, Watch Links, Watches".
The code section at Design/Them Editor/Common/ Header.twig is-
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<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">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<nav id="top">
<div class="container">{{ currency }}
{{ language }}
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
<li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
{% if logged %}
<li><a href="{{ account }}">{{ text_account }}</a></li>
<li><a href="{{ order }}">{{ text_order }}</a></li>
<li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
<li><a href="{{ download }}">{{ text_download }}</a></li>
<li><a href="{{ logout }}">{{ text_logout }}</a></li>
{% else %}
<li><a href="{{ register }}">{{ text_register }}</a></li>
<li><a href="{{ login }}">{{ text_login }}</a></li>
{% endif %}
</ul>
</li>
<li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
<li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo">{% if logo %}<a href="../index.php"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" /></a>{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}</div>
</div>
<div class="col-sm-5"> </div>
<div class="col-sm-3">
{{ search }}</div>
{{ menu }} </div>
</div>
</header>
Any help would be greatly appreciated.
The website is TheWatchLink.co.uk and I want ad the blog at the end of the bit that says "Home, Accessories, Straps & Clasps, Watch Boxes, Watch Links, Watches".
The code section at Design/Them Editor/Common/ Header.twig is-
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<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">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<nav id="top">
<div class="container">{{ currency }}
{{ language }}
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
<li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
{% if logged %}
<li><a href="{{ account }}">{{ text_account }}</a></li>
<li><a href="{{ order }}">{{ text_order }}</a></li>
<li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
<li><a href="{{ download }}">{{ text_download }}</a></li>
<li><a href="{{ logout }}">{{ text_logout }}</a></li>
{% else %}
<li><a href="{{ register }}">{{ text_register }}</a></li>
<li><a href="{{ login }}">{{ text_login }}</a></li>
{% endif %}
</ul>
</li>
<li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
<li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo">{% if logo %}<a href="../index.php"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" /></a>{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}</div>
</div>
<div class="col-sm-5"> </div>
<div class="col-sm-3">
{{ search }}</div>
{{ menu }} </div>
</div>
</header>
Any help would be greatly appreciated.