Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding padding / margin to website with a vertical navigation side bar?


Mehak

Question

Site URL: https://www.roseysbeauty.co.uk/

Hi there! 

I've added a vertical navigation to a site for a client in 7.1 (which works well - code below via ghost plugins) , but the side nav means that all the content is pushed towards the left side. I have added a site wide margin of 5vw in the spacing options and the following code in the custom css: 

 

 // Vertical Navigation //
@media screen and (min-width: 640px) {
.header-nav-list {
  width: 135vh !important;
  padding: 15px;
  background:hsl(6, 64%, 33%) ;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}
}

I have tried using the following code to add the padding to the left size, but it is not looking right and each time I make the screen smaller on the laptop or via a tablet view it starts to get closer to the left side again. (I've added some pictures to explain this more clearly) :

@media screen and (min-width: 901px){
  #collection-5f8759667f0f4c44ec700440 {
   margin-left: 0px !important;
   margin-right: 0px !important;
   padding-left: 5vh !important;
   padding-right: 0px !important;
}
}

Would be extremely grateful if any one could suggest how I could fix this so that both sides are equal at all times!! The vertical nav bar is only for desktop and tablet / ipad view. 

The website is www.roseysbeauty.co.uk and password is roseysbeauty1 🥰

Many many thanks, 

Mehak

Screenshot 2020-11-25 at 00.29.00.png

Screenshot 2020-11-25 at 00.28.52.png

Screenshot 2020-11-25 at 00.28.26.png

Screenshot 2020-11-25 at 00.28.19.png

Screenshot 2020-11-25 at 00.31.53.png

Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
On 11/24/2020 at 4:36 PM, Mehak said:

I have added a site wide margin of 5vw in the spacing options

I'm thinking that part of your issue could be the use of the 5vw. The vw unit is not a fixed unit in that each 1vw changes width based on the width of the viewport.

If you go to px or other fixed unit the issue may get better.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...