CSS Navigation Bar

thesacredpath · Member · Mar 23, 2018 at 7:06 pm
Copy link
Many thanks for the clarification. Add this and see what you think.
```
.site-title {
  float: left;
  margin-left: 50px
}
```
foosboleros · Member · Apr 20, 2018 at 6:23 am
Copy link
It worked great, thanks.

I just uploaded an image into my media folder. That image shows how a post looks in the mobile version. Would there be a snippet to get rid of the site title and the menu bar of the entry posts but just on the mobile version and not the computer?
thesacredpath · Member · Apr 20, 2018 at 6:36 pm
Copy link
Yes, we can do that, but it does limit your users when they want to go somewhere else on your site. If they land on single post on your site from an outside link or something, then they have no way to get to any other place on your site.

Let’s try this instead, which makes the header/menu area less tall and also takes away the padding above the image on screens/windows 600px and narrower.
```
@media screen and (max-width: 600px) {
  .single #masthead {
    min-height: 40px;
  }
  .single .entry-content-wrapper {
    padding-top: 0;
  }
}
```
foosboleros · Member · Apr 21, 2018 at 2:56 am
Copy link
You have a great point and indeed looks better like that.

Now would there be a snippet for the sitle title of that mobile version post entry be more to the left?
thesacredpath · Member · Apr 22, 2018 at 7:22 pm
Copy link
Give this a try for the site title shift. You can edit the 30px value as desired (it was 50px).
```
.site-title {
  margin-left: 30px;
}
```

1 2

The topic ‘CSS Navigation Bar’ is closed to new replies.

WordPress.com forums

CSS Navigation Bar