Hello…
I’m working on the Personal Portfolio Challenge and I can’t figure out how to get my 3 menu options to look like a “button” or look like a clickable tab. Anything I’ve attempted so far either doesn’t work or misses up what I got laid out already.
Also, at the bottom of the page in my footer. I want to place the "social Media’ text over the buttons that links to my social medias I placed on the right side .
Can anyone help me fix these and explain how it should be done?
Thanks
Are you trying to make the main navigation links to look like a button or a tab?
For a button maybe look at the buttons you have below (social media links) and try putting their class names on the a tag in the main nav? See what happens.
With the social media header there are a few things.
first div elements (nav, main, div, aside) act like block elements. Meaning, they take up 100% of the width of their container and will not wrap to the next line. Look up the Box model css to learn more.
Second it appears that your h1 tag is outside of the nav element in the social media section. I’d try putting it inside the nav element.
There is one more thing that you’ll need to do that relates to the h1 and it’s layout. Hint… it has to do with the class you have on that h1.
Finally, you should only ever have 1 h1 on any page at anytime, especially for web based projects.
Ah okay. So if you’re looking to do tabs you’re going to need to change your markup and a few other things.
It appears your project is using Bootstrap. That means you have docs available to help you.
You’re going to want to look at this page. Copy the example for the class names and html structure needed. You’ll also going to need to include the JavaScript CDN link in your project. You can add that in the quick add settings for the JS tab in the Code Pen you have. Choose Bootstrap 4.