G Dubyah Posted June 23, 2016 Share Posted June 23, 2016 I'm trying to figure out if the header automatically expands to accommodate the size of the logo, or is it like all the other images and it gets re-sized. I'm asking because I want to add payment type and trust logo's to the right of the logo. I know I could just try it out, but I'd prefer to know before I goo hunting down all the relevant icons to find it doesn't work ! Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 23, 2016 Share Posted June 23, 2016 In the template main.php, let's look at these lines (58-63): 58: <div class="row marg-top" id="top_header"> 59: <div class="small-4 large-3 columns"> 60: <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a> 61: </div> 62: <div class="small-8 large-9 columns nav-boxes"> 63: <div class="row" id="nav-actions"> Line 58 is a row (every row contains twelve columns) that has two div partitions: line 59 and line 62. When the browser calculates the viewport is small, the CSS says that the div at line 59 is to use four (of twelve) columns and the div at line 62 is to use eight (of twelve) columns. When the browser calculates the viewport is large, the CSS says to use three and nine (of twelve) columns. That is the screen real estate given everything, including images. As the width of the viewport narrows, the columns also narrow but maintain their percentage - until the CSS switch-over. (There is a maximum width.) In maintaining their percentages, images are also scaled (by the browser) to fit inside whatever screen real estate the image's containers end up having. So, you can create an enormous header logo, but the browser will scale it to fit the three or four (of twelve) columns. Quote Link to comment Share on other sites More sharing options...
G Dubyah Posted June 24, 2016 Author Share Posted June 24, 2016 So I could in fact put an <li> in there, underneath the logo div to create the row I need to accommodate the trust icons I want to include? Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 24, 2016 Share Posted June 24, 2016 Depending how much room you have under the logo, maybe try this: 59: <div class="small-4 large-3 columns"> 60: <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a> <br /> <img src="trust_logo_1" alt="Trust Logo #1"> <br /> <img src="trust_logo_2" alt="Trust Logo #2"> <br /> <img src="trust_logo_3" alt="Trust Logo #3"> 61: </div> Quote Link to comment Share on other sites More sharing options...
G Dubyah Posted June 25, 2016 Author Share Posted June 25, 2016 I only needed one image as I combined them, it looks great, thanks for the help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.