0

This will be an easy question for most of you no doubt. I am trying to make a web page for my friend using this theme:

http://www.templatemo.com/live/templatemo_452_stone

I'm trying to move the header "STONE" more to the left, any ideas on how to do this?.. Also if possible I'd like the front-page image to be slightly higher up than it is.

Thanks in advance, I've got a headache from all the messing with it!

Johnny Charnock
  • 39
  • 1
  • 4

3 Answers3

3

Looks like your .container class has a set width of 1177px. If you only want the header to move and not the links as well, then you'll have to add some negative margin. 

.navbar-header {
   margin-left: -50px;
}
Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
1

Change your class container to container-fluid as below.

<div class="site-header">
        <div class="container-fluid">
            <div class="row">
                <nav class="navbar navbar-default navbar-static-top">
                    <div class="navbar-header">

The final output would be as below.

enter image description here

The difference between container and container-fluid as stated in the answer here is

.container-fluid continuously resizes as you change the width of your window/browser by any amount, leaving no extra empty space on the sides ever, unlike how .container does. (Hence the naming: "fluid" as opposed to "digital", "discrete", "chunked", or "quantized").

Community
  • 1
  • 1
Lal
  • 14,726
  • 4
  • 45
  • 70
0

You have to set this css rule to achive it:

div.row {
    margin-left: -100px !important;
}

But as I don't know about your html/css structure it may have side effects...

You can also search in the html for the line:

<div class="row">

and put the style inlined:

<div class="row" style="margin-left: -100px">

Of course change -100px for the number of pixels you want. In the original css it's set to -15px;

Vi100
  • 4,080
  • 1
  • 27
  • 42